1.前端程式碼（ElementUI）

<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)

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

• 上傳程式碼中不要設定請求頭

# 不要設定這個
headers: {
    'Content-Type': 'multipart/form-data'
}

Axios檢測到當前請求是formData請求時會刪掉Content-Type，如果自己加這個的話會報the request was rejected because no multipart boundary was found錯誤
原因是：不加的話瀏覽器自動處理表單請求
請求頭是這樣的

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

加的話

Content-Type: multipart/form-data;

後端加上 @RequestParam("file") 用來接收formData中的值，多個值寫多個@RequestParam("file")

請求體中不要加 {} ,new ForData()物件，賦值，將formData直接放到入參物件位置

正確示例

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

錯誤示例

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

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

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