Javascript 在Vue JS中发布多部分数据（带有额外字段的图像）

我最近开始学习使用Vue JS进行Web开发（大约2-3天前）

我们有一个后端JavaSpring服务器，配置为接受图像和额外字段。用户需要输入docType和映像，当他单击提交按钮时，它应该向服务器发送{docType，映像文件，userId，taskType}

我一直试图发布多部分数据，但没有成功。昨天有人建议我使用Axios发布，但可能我用错了

我目前收到错误：“400（坏请求）”使用Chrome的高级Rest客户端，我可以将其作为多部分发布，因此我确信后端URL是正确的，工作正常。 如果我能理解哪些部分是正确的，哪些部分是错误的，应该进行调整，我将非常感激。 谢谢

DocType
提交
var vm=新的Vue({
el:“#应用程序”，
数据：{
},
数据（）{
返回{
附件：空，
formData：新的formData，
用户标识：“”，
任务类型：“”，
docType:'
}          
},
方法：{
现场更改（e）{
控制台日志（e）；
让selectedFile=e.target.files[0]；
this.attachment=selectedFile；
},
上载文件：函数（事件）{
event.preventDefault（）
this.formData.append（'userID'，“1234567”）
this.formData.append（'taskType'，“task1”）
this.formData.append（'file'，this.attachment）
this.form.append（'docType'，“doc1”）
轴心柱http://server:port/uploadURL，this.formData.config）。然后（响应=>{
const config={'accept'：'application/json'，
标题：{'Content Type'：'multipart/form data；boundary=${data.\u boundary}}；
//
//成功
})
.catch（响应=>{
//错误
})
}
}
});

可能是这样的：

不要将formData放入数据中，而是将其移动到您的方法：

uploadFile: function(){
 //be sure to give your form an id
 var form = document.getElementById("form_edit");
 var formData = new FormData(form);
     //the file should already be in formData at this point
     //append other stuff as needed
     formData.append('userID', "1234567")

    axios.post('http://server:port/uploadURL', formData).then(...
     //check the console to see what is submitted in formData 
}

---

谢谢你让我知道这些变化。我相应地修改了代码。但它仍然给我错误。在查看Dev tools中的network选项卡时，我发现错误为：error 400:Required String parameter'；用户ID'不存在。

uploadFile: function(){
 //be sure to give your form an id
 var form = document.getElementById("form_edit");
 var formData = new FormData(form);
     //the file should already be in formData at this point
     //append other stuff as needed
     formData.append('userID', "1234567")

    axios.post('http://server:port/uploadURL', formData).then(...
     //check the console to see what is submitted in formData 
}