使用element-ui的upload組件上傳代碼包時遇到的問題小結

更新時間：2022年12月14日 16:01:09 作者：遛狗先生

這篇文章主要介紹了使用element-ui的upload組件上傳代碼包時遇到的問題及總結,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1.在工作中使用element-ui的upload組件時，遇到一個問題就是這個upload會自動發(fā)送一個http請求，即使你使用了http-request自定義上傳覆蓋默認上傳函數，也會導致在控制臺里多出一個請求，并且當項目中使用proxy代理掛載到原型上類似的請求接口方法的時候，必須知道原請求路徑放在他的actions屬性中，才可以使它的多余請求不報錯，可能說的有一些混亂，接下來用代碼演示：

export function proxy (interfaceId, proxyOptions = {}) {
  return (data = {}, options = {}) => {
    let config = Object.assign({}, proxyOptions, options)
    return app.api.rpc(interfaceId, data, config)
  }
}

2.在項目中使用類似的接口處理函數的時候，此時的actions里面應該填寫要請求的服務器地址，但是項目中已經把請求封裝且做了統(tǒng)一處理的時候，這個actions就基本不會再去使用它，就算使用也得加上很多環(huán)境使用的判斷條件，actions的局限性由此體現了出來，但是element-ui的官方又給了http-request的方法可以覆蓋默認的上傳函數，接下來我們看一下使用http-request的方法來定義這個上傳函數會出現什么問題？

   // 自定義上傳函數，覆蓋默認的上傳
    uploadSectionFile(params) {
      console.log(params.file);
      console.log(file);
      this.fileName = file.name;
      // apcremiId 組件庫id
      // version 版本號
      // file  壓縮包
      this.impProgressPercent = true;
      let i = 1;
      let timer = setInterval(() => {  // 這只是一個動畫效果可以忽略
        this.importProgressPercent = i;
        i++;
        if (i == 100) {
          clearInterval(timer);
        }
      }, 10);
      let formData = new FormData();  //定義傳向服務器的參數
      formData.append("file", file.raw);
      formData.append("apcremiId", this.apcremiId);
      formData.append("version", this.version);
      formData.append("apcremiCode", this.apcremiCode);
      //接下來是接口請求 // 可以稍微看一下
      this.getRes(formData)
        .then((res) => {
          console.log(res);
          this.handleSuccess();
          let info = {
            packageUrl: res.url,
            packageName: res.packageNm,
            version: res.version,
            idList:res.idList
          };
          this.buildRes(info)
            .then((res) => {
              console.log(res);
              this.expProgressPercent = true;
              let j = 1;
              let timer1 = setInterval(() => {
                this.explainProgressPercent = j;
                j++;
                if (j == 100) {
                  clearInterval(timer1);
                  this.explainStart();
                }
              }, 40);
            })
            .catch((err) => {
              console.log(err);
              this.eError = err.errorMsg
              this.buildError();
            });
        })
        .catch((err) => {
          console.log(err);
          console.log("上傳失敗");
          this.iError = err.errorMsg
          this.handleError();
        });
    },

3.出現的問題及總結

第一個問題：當傳入組件包的時候發(fā)現上傳文件傳了兩個接口，這個時候在后端有強校驗的情況下，不能重復的傳代碼包，因為上傳代碼包解析之后就會入庫，而入庫的強校驗就會拋出錯誤，前端項目接受后就會彈窗報錯，體驗極其不好，這個是我粗心的問題，還是得看文檔看文檔看文檔，element-ui的upload組件有一個auto-upload屬性默認為true，也就是默認在你選中文件的時候就會調用http-request這個函數，并且就會調用你自己配置的一個上傳，導致上傳兩次報錯

第二個問題：可以看出代碼中一直鏈式調用，然后在promise的函數中寫上傳成功，上傳失敗和進度條的代碼，而element-ui自己的上傳成功等函數就會失效，我當時在想，這個可能是個缺陷，當然這個時候得感謝我的組長，一語點醒，當時他說：組件沒有問題，你使用的有點問題，在源碼中，upload組件內部往我們自定的上傳方法中傳遞了一個options參數，其中包含了對upload上傳文件 success 成功函數和error 失敗函數，也就是說，其實我們也可以在自定義上傳里面主動調用這些鉤子以實現相應功能，當然這就是我自己使用的一個方法，可以算是誤打誤撞了，但是這個方法是有些繁瑣。

如何解決這個問題其實非常簡單，即添加return 語句返回promise 結果，因為我們大多數的請求都是使用axios，而axios返回的就是promise函數，所以只需要在你調用接口的地方去寫一個return去返回他，就不用那么繁瑣的去手動調用，有的時候判斷多了，找不到自己的函數，讓代碼內部自己去判斷，可以說是物盡其用。