formData上传问题前端如何传递后端如何接收Required request part ‘files’ is not present

文章目录

    • 一. 前言
    • 二. 问题描述
    • 三.前端正确解决方式
    • 四. 后端接收代码


一. 前言

参考文章:
解决Current request is not a multipart request
axios上传文件错误:Current request is not a multipart reques


二. 问题描述

之前使用el-upload使用默认action表单提交.前端默认content-type为multipart/form-data.没有问题. 后期渐进式优化.修改为axios+formdata传递内容.

Current request is not a multipart request
这个错误是因为后端读取MultipartFile 类型数据时,对申请头的类型进行了一个判断,他只识别 multipart 开头的 Content-Type。所以我们需要修改headers 的 Content-Type。但是手动添加headers会产生第二个错误。所以建议使用formdata 的方式.
参数为formdata 时,浏览器会自动添加一个标准的headers。
formData上传问题前端如何传递后端如何接收Required request part ‘files’ is not present_第1张图片
formData上传问题前端如何传递后端如何接收Required request part ‘files’ is not present_第2张图片
上传代码
formData上传问题前端如何传递后端如何接收Required request part ‘files’ is not present_第3张图片

提交post封装请求
formData上传问题前端如何传递后端如何接收Required request part ‘files’ is not present_第4张图片

三.前端正确解决方式

            uploadFile(url) {
                if (this.fileList.length === 0) {
                    return this.$message.warning('请上传文件');
                }
                // 使用FormData()上传
                let form = new FormData(); // new Window.FormData()
                for(let i=0;i<this.fileList.length;i++){
                    form.append('file', this.fileList[i]);
                }
                // 调用封装的post
                postFiles(url, form)
                this.fileList = []
            }

function postFiles(url, data = {}) {
    return axios({
        method: "post",
        url: url,
        data: data,
        // 这里很重要!!. 将请求头置空,使用formdata默认的请求头,不行使用下方注释内容
        contentType: false,
        //    headers:{
        //       "Content-Type":"application/json"
        //  }
        processData: false
    }).then(async (res) => {
        console.log(res.data)
    });
}

formData上传问题前端如何传递后端如何接收Required request part ‘files’ is not present_第5张图片
formData上传问题前端如何传递后端如何接收Required request part ‘files’ is not present_第6张图片


四. 后端接收代码

 @PostMapping("/uploadBatchTaxRevenue")
    public ResponseResult uploadBatchTaxRevenu(@RequestParam("file") MultipartFile[] files) throws IOException {
        if (files.length == 0) {
            return ResponseResult.okResult(403, "上传文件不能为空!");
        }
        for (MultipartFile file : files) {
            System.out.println(file.getName());
            EasyExcel.read(file.getInputStream(), TaxRevenue.class, new TaxRevenueDataListener(taxRevenueService))
                    .sheet()
                    .doRead();
        }
        return ResponseResult.okResult(200, "上传成功");
    }

formData上传问题前端如何传递后端如何接收Required request part ‘files’ is not present_第7张图片

你可能感兴趣的:(Java体系,前端,vue.js,javascript)