如何将img标签中的图像作为文件或formData而不是base64上传到不同的服务器答案

【问题标题】：How to upload an image in img tag to a different server as a file or formData but not base64如何将img标签中的图像作为文件或formData而不是base64上传到不同的服务器
【发布时间】：2018-04-08 16:08:06
【问题描述】：

基本上，网站上有很多图片。用户通过单击选择一张图片并将其上传到不同的服务器。

我有一个实现，它读取用户在 img 标签中选择的图像 src，并将其作为 base64 字符串上传到不同的服务器，通过 ajax 附加到 URL 的末尾。

我希望这张图片以 formData 或文件上传的形式上传。有什么帮助吗？

我当前的实现使用文件阅读器的输出创建 formData 并将其作为 ajax 中的数据上传：

var img_data = new FormData();
// img is output of file reader which looks like "data:image/jpg;base64,XXX"
img_data.append("image", img, "site_image.jpg");

$.ajax({
    type : 'post',
    url : "other server url",
    data : img_data,
    contentType: "image/jpeg",
    processData: false,
...}),

但是我在我的烧瓶服务器中看不到任何有用的数据。这是烧瓶中的输出：

files: len: 0 type: <class 'werkzeug.datastructures.ImmutableMultiDict'>
[]
data: len: 136 type: <type 'str'>
------WebKitFormBoundaryJ8YC9pZxjqRl0tyD
Content-Disposition: form-data; name="image"


------WebKitFormBoundaryJ8YC9pZxjqRl0tyD--

form: len: 0 type: <class 'werkzeug.datastructures.ImmutableMultiDict'>
ImmutableMultiDict([])

data str 中有奇怪的东西，但无法获取任何图像数据。

【问题讨论】：

如果你console.log(img_data)会发生什么？
您应该将 base64 格式的 img 转换为 javascript 文件对象，而不是将其附加到表单数据中。检查这个； stackoverflow.com/questions/16245767/…
为什么要用FileReader的输出？直接使用您传入的 input Blob。此外，您应该将您的 contentType 设置为 false，它将作为 FormData 请求发送，这将旧您的二进制文件，但不是作为 @987654326 @ 直接地。我认为直接发出image/jpeg 请求的唯一方法是通过 PUT 请求。
img_data 显示一个空字典 FormData {} 尽管 console.log(img) 显示图像数据。我不明白！
@Kaiido 我是 javascript 新手，所以我就是这样做的。输入 blob 是什么意思？我有一个函数toDataURL，它接受像abc/img.jpg 这样的本地图像src，并返回看起来像data:image/jpg;base64,XXX 的数据url。你会建议我做什么？是的，我会修改contentType。

标签： javascript ajax flask

【解决方案1】：

上传图片而不转换为base64 需要您使用FormData。

对我来说，我使用jQuery Form，它会为你模仿 ajax 帖子并且（如果浏览器不支持的方法）。

如果您想手动操作，请查看此问题及其最佳答案：
How to use FormData for ajax file upload

【讨论】：

是的，我看过那个帖子。在那里，他们从 html 输入标签中获取图像为$('input[type=file]')[0].files[0]。在我的情况下我该怎么做？因为图片已经在网站上。