将图像的源（src）添加到 formData 并通过 http post call 将其发布到后端

Posted 2023-04-13

【中文标题】将图像的源（src）添加到 formData 并通过 http post call 将其发布到后端

【英文标题】：adding source(src) of image to formData and posting it to backend via http post call

【发布时间】：2019-11-03 11:01:45

【问题描述】：

我有一个带有 src="fast.jpg" 的 img 标签。我想从我的源文件夹中获取图像，将其添加到表单数据并通过 http post call 发送

html:

<img src="fast.jpg" data-highres="fast.jpg"  
style="width:150px;height:150px;"id="img1"  onclick="myFunction(this);" >

javascript：

var img = document.getElementById($(target).attr("id")).src

console.log("img>>>>",img)

var files = img.files
console.log("files", files)
var formData = new FormData();
formData.append('pic[]', img.name);

console.log("formdata>>", formData) 

通话后：

    xhttp.open("POST", "http://127.0.0.1:5001/testpost", true);
    xhttp.withCredentials = false;
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.setRequestHeader("cache-control", "no-cache", "no-cors");
    xhttp.send(formData);

【参考方案1】：

您需要为XMLHttpRequest 添加内容类型 //设置请求头信息

http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

而且你的文件内容不正确，需要输入type="file"来选择图片，img标签只用于预览上传图片。

【讨论】：

我有很少的图像缩略图和点击这些图像我需要进行后期调用。

【参考方案2】：

在带有 id 的表单中输入图像，然后使用：

<form id="myForm">
  <input type="file" name="myPicture">
</form>

在您的 js 代码中，发送表单，如下所示：

var formData = new FormData( $('form#myForm')[0] );

【讨论】：

我不能使用表单标签，因为我在 UI 中有一个图片库，并且可以点击任何我希望从 src 中挑选图片并进行发布调用的图片

图库中的图片无法从本地文件系统加载，而是从服务器加载，您需要发布图片。我无法理解。如果你能解释更多，我可以帮忙