axios一次性提交多个文件

最新推荐文章于 2024-04-22 16:42:09 发布

iwill567

最新推荐文章于 2024-04-22 16:42:09 发布

阅读量2.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/vezine/article/details/126409686

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用axios库通过FormData对象上传文件，并附带其他参数，同时展示了对应的后台Spring MVC接口处理。重点在于前端表单组件的实现和前后端交互的API设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();
}