问题遇到的现象和发生背景
多张图片上传:
vue+springBoot 前端post传参出现400
问题相关代码,请勿粘贴截图
前端 方法:
let self = this;
var form = document.forms.namedItem("fileinfo");
var formData = new FormData(form);
for (var i = 0; i < this.imgList.length; i++) {
//"files" 要和后端请求名相同
formData.append("files", this.imgList[i].file);
}
//第一次提交 这个是成功的
this.$axios
.post("/addPicture", formData, {
emulateJSON: true,
"Content-Type": "multipart/form-data"
})
.then(resp => {
if (resp.data.errorCode == 0) {
self.uploadState = false;
self.catId = resp.data.result.catId;
self.oldImgList = resp.data.result.pictureUrls;
this.$message({
message: "上传成功!",
type: "success"
});
}
});
//修改 catId 从后端返旧文件组 新文件组 这个是失败的
this.$axios
.post(
"/modifyPicture",
{
data: {
files: formData,//空值
catId: self.catId,
oldImgList: self.oldImgList
}
},
{
emulateJSON: true,
"Content-Type": "multipart/form-data"
}
).then(resp => {
if (resp.data.errorCode == 0) {
self.oldImgList = resp.data.result.pictureUrls;
this.$message({
message: "修改成功!", //全部确定后改为上传
type: "success"
});
}
});
}
}
}
}
后端方法:
@PostMapping("/modifyPicture")
@ResponseBody
// public JSONResult modifyPicture(Integer catId,String oldImgList,List files) {
public JSONResult modifyPicture(@RequestBody List files,@RequestBody Integer catId,@RequestBody String oldImgList) {
运行结果及报错内容
POST http://localhost:8933/modifyPicture 400
createError.js?16d0:16 Uncaught (in promise) Error: Request failed with status code 400
{"data":{"files":{},"catId":"75","oldImgList":"814dbb7f-39db-4e55-883a-654ff9e453ae.jpg"}}