formData上传问题前端如何传递后端如何接收Required request part ‘files’ is not present_new formdata() 后台接收_呆萌小新@渊洁的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

一. 前言

参考文章:
解决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。

上传代码

提交post封装请求

三.前端正确解决方式

            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)
    });
四. 后端接收代码
 
 @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, "上传成功");
                                    在前后端分离的项目中经常使用到Vue+axios通过FormData的方式向后端(Java)发送表单数据(文字+图片)，但是在初次写这个功能时，可能会遇到很多问题，本文详细的记录了该功能的实现。将前端发送的数据名称和后端修改一致。
@ApiOperation(value = "岗位新增，并向ERP发送同步消息")
    @ApiImplicitParam(name = "sessionid",dataType = "String",paramType = "header")
    @PostMapping("/save")
    public FusenJSONR
2, 后台接收方式如下：
    @RequestMapping(value = "/publish/{eventId}", method = { RequestMethod.POST})
    public ResponseResult toPublish(HttpServletRequest request, @PathVariable final 
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org...
1 前端用formdata()的方式提交
 let form=document.getElementById('form')
  var param = new FormData(form);
    let config = {
    //添加请求头
    headers: { 'Conten...
                                    前端代码
<form id="te" class="form-horizontal" action="" method="post" enctype="multipart/form-data">
 <div class="form-group">
 <label class="control-label col-sm-3" for=""&g...
                                    向后台接口传递FormData格式的数组对象
在js中，new FormData()  对象后，可以通过 append(name, value) 的方式往该对象中添加添加数据。然而append的值只能是字符串或者文件的格式，对于复杂的数组中包含对象的数据怎么添加呢？下面是我使用的方法：
后台接口要求的入参格式：
<input type="text" name="title"/>
<input type="file" name="file"/>
<input type="te
可以使用FormData.append来添加键/值对到表单里面；
2. 后端的多部分传参
和后端接口保持统一，那么可能不全是表单格式的数据，可能设置的不同的格式，比如文件格式的文件和数据格式的数值，因此需要带格式传过去（new Blob方法）。
                                    知识前言：
1.Content-Type: 一个请求都会有请求的内容类型，默认是application/x-www-form-urlencoded; charset=UTF-8
常见的接种请求数据类型：
application/x-www-form-urlencoded
1）浏览器的原生form表单
2） 提交的数据按照 key1=val1&key2=val2 的方式进行编码，key和val都进行了URL转码
multipart/form-data
常见的 POST 数据提交的方式。我.
                                    实现后端对Ajax的FormData对象所传文件的接收
ServletFileUpload的依赖库链接：
https://pan.baidu.com/s/14MfxOghnP-t1Q-sAQDh6kA
提取码：hcyc
前端FormData：
<form id="form1" method="post" enctype="multipart/form-data"  action="" style=" width: 80%; margin:0 auto;">
	<!-- form要设置 en