vue-axios和springboot同时接收(上传)MultipartFile文件和json数据

最新推荐文章于 2024-03-11 18:16:50 发布

Jay_Chou345

最新推荐文章于 2024-03-11 18:16:50 发布

阅读量4.1k

点赞数 3

分类专栏： springboot vue JavaScript 文章标签： java vue json js axios

本文链接：https://blog.csdn.net/Jay_Chou345/article/details/117537803

版权

springboot 同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

vue

13 篇文章 2 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

springboot同时接收MultipartFile文件和json数据

话不多说直接贴代码

后端

用post方式，以@RequestParam接收数据

    @PostMapping("/add")
    public void add(@RequestParam("multipartFiles") MultipartFile[] multipartFiles,@RequestParam("material") String material){}

前端

api.js中的方法

export function addMaterial(imgfile) {
    return request({
        url: '/material/add',
        method: 'post',
        data:imgfile
    })
}

从api.js中导入addMaterial方法

也可以不这样，是可以直接一个axios方法提交的，这里贴的是自己没有改的代码

		add(){
		//this.multipartFiles是需要上传的文件数组
          let imgfile = new FormData();
          for (let i = 0; i < this.multipartFiles.length; i++) {
          //此处要和后端参数名对应
            imgfile.append("multipartFiles",this.multipartFiles[i].raw);
          }
          //此处要和后端参数名对应,将对象转换json
          imgfile.append("material", JSON.stringify(this.material));
          //此处我调用的是api.js中的方法
          addMaterial(imgfile)
          .then(response=>{
            //代码
          })
          .catch(error=>{
            //代码
          })
        },