使用vant的Uploader组件+axios+springmvc进行多文件上传
1.前端
1.页面upload.vue,使用vant的Uploader 组件
<van-uploader v-model="aaFiles" upload-text="附件列表1"/>
<van-uploader v-model="bbFiles" upload-text="附件列表2"/>
2.用FormData对象接收数据,使用axios上传文件到后端。
let formData = new FormData();
if (this.aaFiles.length > 0) {
for (let index = 0; index < this.aaFiles.length; index++) {
const element = this.aaFiles[index];
//element.file取的是File文件对象
formData.append("aaFiles", element.file);
}
}
if (this.bbFiles.length > 0) {
for (let index = 0; index < this.bbFiles.length; index++) {
const element = this.bbFiles[index];
formData.append("bbFiles", element.file);
}
}
this.$api.common.uploadFiles(formData).then(res => {
if (res.success) {
console.log("上传成功");
} else {
console.log("上传失败");
}
});
直接给formData append 一个数组的话会变成一个字符串,这样后台拿不到文件信息。所以需要遍历循环append同一个键。如果指定的键已经存在,formdata的 append() 会把新值添加到已有值集合的后面。
uploadFiles是封装的上传文件api
//必须设置Content-Type为multipart/form-data才能进行文件上传
uploadFiles(formData) {
return axios.post("common/uploadFiles.do", formData, {
timeout: 0, //无超时时间
headers: { "Content-Type": "multipart/form-data" }
});
}
后端使用MultipartFile接收多文件列表
@RequestMapping(value = "uploadFiles.do",method = RequestMethod.POST)
@ResponseBody
public JsonModel uploadFiles( @RequestParam("aaFiles") MultipartFile[] aaFiles,
@RequestParam("bbFiles") MultipartFile[] bbFiles) {
}