上传文件请参考我的这一篇文章ant-design-vue上传头像
uploadimg($e) {
// 第一步.将图片上传到服务器.
var formdata = new FormData();
for (var _img in this.img_file) {
formdata.append("files", this.img_file[_img]);
}
uploadApi.uploadFileList(formdata).then(res => {
console.log(res);
const resData = res.data.data;
/**
* 例如:返回数据为 res = [[pos, url], [pos, url]...]
* pos 为原图片标志(0)
* url 为上传后图片的url地址
*/
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
for (var i = 0; i < resData.length; i++) {
this.$refs.md.$img2Url(i + 1, resData[i]);
}
});
}
官方文档中,formdata的key使用的是_img,导致后台使用@RequestParam注解接收时获得不到文件,这里的key应和注解的value值对应!!
formdata.append("files", this.img_file[_img]);
返回的url替换到对应文本位置时,后台使用的结构为List,按照传过去的文件顺序地存入对应的文件url,因为前端遍历时,原图标志应从1开始,即每次循环的i+1