记一次ElementUI上传文件，Current request is not a multipart request与the request was rejected because no multipart boundary was found

1.前端代码（ElementUI）

Copy
<template>
  <el-upload
      class="upload-demo"
      ref="upload"
      drag
      action=""
      :limit="1"
      :multiple="true"
      :auto-upload="false"
      :http-request="uploadFileToServer"
      multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>
<script>
  uploadFileToServer(file){
    let formData = new FormData();
    formData.append('file', file.file);
    this.$http.upload('/onlineFile/test',formData).then(e=> {
      console.log(e,"66666");
    })
  },
</script>

2.后端代码(Spirngboot)

Copy
@PostMapping("/test")
public void test(@RequestParam("file") MultipartFile file){
    System.out.println(777);
    System.out.println(file);
}

• 上传代码中不要设置请求头

Copy
# 不要设置这个
headers: {
    'Content-Type': 'multipart/form-data'
}

Axios检测到当前请求是formData请求时会删掉Content-Type，如果自己加这个的话会报the request was rejected because no multipart boundary was found错误
原因是：不加的话浏览器自动处理表单请求
请求头是这样的

Copy
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryPkQ6gYf4jtuB29ck

加的话

Copy
Content-Type: multipart/form-data;

后端加上 @RequestParam("file") 用来接收formData中的值，多个值写多个@RequestParam("file")

请求体中不要加 {} ,new ForData()对象，赋值，将formData直接放到入参对象位置

正确示例

Copy
uploadFileToServer(file){
    let formData = new FormData();
    formData.append('file', file.file);
    this.$http.upload('/onlineFile/test',formData).then(e=> {
      console.log(e,"66666");
    })
  },

错误示例

Copy
uploadFileToServer(file){
    this.$http.upload('/onlineFile/test',{
    file:file.file
  }).then(e=> {
    console.log(e,"66666");
  })
},

Copy
uploadFileToServer(file){
    let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        } 
    }
    this.$http.upload('/onlineFile/test',{
      file:file.file
    },config).then(e=> {
      console.log(e,"66666");
    })
},

Copy
uploadFileToServer(file){
    let formData = new FormData();
    formData.append('file', file.file);
    this.$http.upload('/onlineFile/test',{
      file: formData
    }).then(e=> {
      console.log(e,"66666");
    })
},

Copy
uploadFileToServer(file){
    let formData = new FormData();
    formData.append('file', file.file);
    this.$http.upload('/onlineFile/test',{
      formData
    }).then(e=> {
      console.log(e,"66666");
    })
},