vue項目使用axios+element-ui的upload組件實現文件上傳功能

<el-upload
   class="avatar-uploader"
   action
   name="file1"
   :show-file-list="false"
   :http-request="uploadImg" 
> 
　　<div class="upload-btn">上傳</div> 
</el-upload>

:http-request="uploadImg" 為重寫的上傳方法

uploadImg(fileObj) {
      let formData = new FormData();
      formData.set("file", fileObj.file);
      axios
        .post('接口地址', formData, {
          headers: {
            "Content-type": "multipart/form-data"
          }
        }).then().catch();

首先創建一個空的文件對象，let formData = new FormData();

然后通過 set 方法，把獲取到的圖片/文件，裝入文件對象中；

然后設置請求頭；

//POST傳參序列化
axios.interceptors.request.use(
  config => {
    console.log(config, "request");
    if (config.method === "post") {
      let curPost = config.url.split("/")[config.url.split("/").length - 1];
      if (curPost === "uploadpicture" || curPost === "uploadfile") {
        return config; // 這里對上傳文件/圖片的 api 不做傳參序列化處理
      } else {
        config.data = qs.stringify(config.data);
        return config;
      }
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

最重要的一步：

傳參不能序列化，否則傳遞的就不是文件（file），導致上傳無法成功。