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

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

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

   // 自定義上傳函數(shù)，覆蓋默認(rèn)的上傳
    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(() => {  // 這只是一個(gè)動(dòng)畫效果可以忽略
        this.importProgressPercent = i;
        i++;
        if (i == 100) {
          clearInterval(timer);
        }
      }, 10);
      let formData = new FormData();  //定義傳向服務(wù)器的參數(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é)

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

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

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

之前的代碼可以說減少了一半，閱讀起來也看的清楚了，而那些成功或者失敗觸發(fā)相應(yīng)的操作只需要在成功或者失敗回調(diào)函數(shù)中定義就可以了 

 這是在網(wǎng)上找到的一個(gè)截圖，可以發(fā)現(xiàn)我們可以通過http-request的自定義方法中的return promise來關(guān)聯(lián)內(nèi)部的成功，失敗函數(shù)。

附言：

后端大哥處理導(dǎo)入文件的處理邏輯：

1.處理tgz格式的壓縮包

2.獲取文件流（MultipartFile file）

3.先上傳服務(wù)器作為臨時(shí)文件供解析使用（解析需要校驗(yàn)，需要上傳才能解析）

4.判斷指定目錄下指定文件是否存在，存在的話就解析json格式文件，并返回jsonArray數(shù)組

5.將臨時(shí)文件復(fù)制到指定目錄（因?yàn)橹荒茉谥付繕?biāo)目錄下才能構(gòu)建）

6.根據(jù)jsonArray的數(shù)據(jù)入庫，返回構(gòu)建的需要參數(shù)

7.根據(jù)所傳參數(shù)構(gòu)建vue組件（這里的vue組件就是一個(gè)頁面）

到此這篇關(guān)于使用element-ui的upload組件上傳代碼包時(shí)遇到的問題及總結(jié)的文章就介紹到這了,更多相關(guān)element-ui的upload組件上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論