1. 使用element-ui 的 el-upload 進行上傳

• 注意：:http-request 指令的使用
  使用該指令， :on-success, :on-error 指令是不會觸發(fā)的

• http-request 覆蓋默認的上傳行為，可以自定義上傳的實現(xiàn)

• 但是需要將 action置空，action=""

<el-upload
              action=" "
              :show-file-list="false"
              :http-request="uploadFiles"
            >
              <div class="upload">
                <img
                  class="smallImg"
                  src="@/assets/images/whiteCap/icon_gaitouxian.png"
                />
                <div>修改頭像</div>
              </div>
</el-upload>

• methods,調用請求方法
  @params 參數(shù)：是http-request 指定自帶的成功回調參數(shù)。

async uploadFiles(param) {
      const res = await uploadFiles({ upload: param.file });
      console.log(res);
      if(res.status == "200" && res.data.retStatus == "000") {
        this.userInfo.headPortrait = res.data.retBody.attach;
      }
      // console.log(param.file);
    },

• request.js 封裝請求函數(shù)
  設置為 multipart/form-data 表單類型。

//文件上傳接口：
export const uploadFiles = (data) => {
  return service({
    url: '/API/nsps/common/uploadFiles',
    method: 'post',
    data,
    contentType: "multipart/form-data",
  })
}

• 需要對表單數(shù)據(jù)就行統(tǒng)一格式化
  在axios請求攔截器統(tǒng)一設置

//請求攔截
service.interceptors.request.use((config) => {
    //統(tǒng)一處理表單格式
    if (config.contentType === "multipart/form-data") {
        //formData 表示表單數(shù)據(jù)的鍵值對 key/value 的構造方式
        const formData = new FormData();
        //這里遍歷一下 因為有可能除了upload 還有其他參數(shù)的嘛
        for (let key in config.data) {
            //再一個個append進去
            formData.append(key, config.data[key]);
        }
        //重新賦值給config.data -------return出去
        config.data = formData;
        //這里設置multipart/form-data 表單傳數(shù)據(jù)需要的contentType
        config.headers["Content-Type"] = config.contentType;
    }
    config.responseType && (config.responseType = "blob");
    return config;
})