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

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

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

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

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

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

   // 自定義上傳函數(shù)，覆蓋默認的上傳
    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();  //定義傳向服務器的參數(shù)
      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.出現(xiàn)的問題及總結(jié)

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

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

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