Question

我创建了一个要上传图像的应用程序。但问题是我发送的数据对象永远不等于formData。因为我根据需要修改（格式化）了数据对象以发送到服务器。

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

类似的东西，

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

为此，我想添加要上传的图像。如果我使用表单数据，那就是这样的。

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

所以，我格式化了要求，我整天都在尝试。但什么也没得到。请帮帮我。

Answer 1

使用Jquery表单，您可以使用该表单上传文件并处理表单数据。使用以下语法：

$('#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.
                  }
              });

有关Jquery表单http://malsup.com/jquery/form/

的更多信息

Answer 2

使用 html canvas https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement 转换为 base64 并将其作为字符串 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()

没有formData

2 个答案: