axios一次性提交多个文件

1. 页面载入组件

import axios from 'axios'

2. 编辑参数

定义formData变量

let param = new FormData()

文件添加到formData中,upload为el-upload组件

for (let index in this.$refs.upload.uploadFiles) {
  param.append("file", this.$refs.upload.uploadFiles[index].raw)
}

携带的其他参数

param.append('name', this.name)
param.append('age', this.age)

3. 编辑请求头参数

let config = {
   headers: {'Content-Type': 'multipart/form-data',
              'token': this.$cookie.get('token')
   }
}

4. 发送请求

axios.post(this.url + '/xxx/save',param, config).then((res)=>{
  if (res.status === 200) {
    let response = res.data
    if (response.code === 0) {
      this.$message.success("操作成功")
    } else {
      this.$message.error(response.msg)
    }
  } else {
    this.$message.error("网络请求异常")
  }
}).catch((err)=>{
      console.log(err)
})

5. 后台接口示例

@RequestMapping("/save")
public R save(@RequestParam("file") MultipartFile [] multipartFile,
              @RequestParam("name") String name,
              @RequestParam("sex") String sex){

	...
	
    return R.ok();
}