不带formData的图片上传

Question

I have created an application where an image to be uploaded. But the problem is I am sending a data object that is never equals to formData. Because I modified(formatted) the data object as required to send to the server.

<input type="file" name="imageUrl" id="photoFile">

Something like,

var data = {
 name: '',
 attributes: [{}, {}]
}

To this I want to add an image to be uploaded. If I use form data, It would be something like this.

var data = {
 name: '',
 attribute1: {},
 attribute2: {}
}

So, I formatted as requirement and I tried throughout the day. But got nothing.

Answer 1

Use Jquery form with which you can upload files and manipulate the form data. Use the following syntax:

$('#form_id').ajaxForm({
                beforeSerialize: function($form, options){
                  // do the data manipulations here and send it to options["data"]
                  options["data"] = processed_data;
                  },
                 dataType:  'json',
                 success:  function(data){
                    //success functional logic.
                  }
              });

For more on Jquery form http://malsup.com/jquery/form/

Answer 2

Convert to base64 using html canvas https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement and send it as a string https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

const getImg64 = async() => {
  const convertImgToBase64URL = (url) => {
  console.log(url)
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.crossOrigin = 'Anonymous';
      img.onload = () => {
          let canvas = document.createElement('CANVAS')
          const ctx = canvas.getContext('2d')
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img, 0, 0);
          const dataURL = canvas.toDataURL();
          canvas = null;
          resolve(dataURL)
      }
      img.src = url;
    })
  }
  //for the demonstration purposes I used proxy server to avoid cross origin error
  const proxyUrl = 'https://cors-anywhere.herokuapp.com/'
  const image = await convertImgToBase64URL(proxyUrl+'https://image.shutterstock.com/image-vector/vector-line-icon-hello-wave-260nw-1521867944.jpg')
  console.log(image)
}
getImg64()