结合了好多资料(查百度)终于把自己的需求 “拼” 好了。(注:全栈小白,养成中...)
需求:不仅要传多个图片,还要额外携带好多个属性参数,用这些属性实现别的逻辑。
首先,上前端代码!(耐心看逻辑,想简单直接拿是不中滴!)
const data = { // 额外的一堆参数param
token: this.token,
uuid: this.userId,
proName: this.form.proName,
proTypeId: this.form.proTypeId,
price: this.form.price,
maxBatch: this.form.maxBatch,
shopName: this.form.shopName,
address: this.form.address
};
let fd = new FormData();
for(let i in data) {
fd.append(i, data[i]);
}
// el-upload的fileList,这个不用多说(想办法把多个图片装在fileList里)
this.fileList.forEach( file => {
fd.append('file', file.raw);
})
this.$http({ // this.$http <==相当于==> this.axios
method: "POST",
url: this.$url.addProDetail, // 接口放这里
headers: {
'Content-Type': "multipart/form-data",
},
data: fd,
params: fd
}).then(res => {
console.log(res);
});
然后,上后端接口(本篇主要说明前端怎么给后端图片文件及多个参数)
@PostMapping("/addPro")
public Response addPro(@RequestParam MultipartFile[] file, ParamQO param) {
return productService.addPro(file, param);
}
本人遇到的难点:
由于对参数接收的注解,理解不是很深,所以之前我把QO加上了@RequestParam,这时候就很矛盾了,既要传一堆参数,还要 - - 对应,我总不能写上一堆参数列表吧(直接挠头!)
不过好在理解了,参数的接收,用对象接收就解决了!
最后结果,上图!
一堆参数成功到手!(东西到手,啥都好说!拿着想要的参数使劲琢磨吧)
// 因为咱也要继续琢磨咋上传了。