欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年12月14日 16:01:09   作者:遛狗先生  
這篇文章主要介紹了使用element-ui的upload組件上傳代碼包時(shí)遇到的問題及總結(jié),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • javascript實(shí)現(xiàn)根據(jù)函數(shù)名稱字符串動(dòng)態(tài)執(zhí)行函數(shù)的方法示例

    javascript實(shí)現(xiàn)根據(jù)函數(shù)名稱字符串動(dòng)態(tài)執(zhí)行函數(shù)的方法示例

    這篇文章主要介紹了javascript實(shí)現(xiàn)根據(jù)函數(shù)名稱字符串動(dòng)態(tài)執(zhí)行函數(shù)的方法,結(jié)合實(shí)例形式分析了JS函數(shù)名的判斷及函數(shù)動(dòng)態(tài)調(diào)用相關(guān)操作技巧,需要的朋友可以參考下
    2016-12-12
  • JavaScript原型式繼承實(shí)現(xiàn)方法

    JavaScript原型式繼承實(shí)現(xiàn)方法

    這篇文章主要介紹了JavaScript原型式繼承實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-11-11
  • javascript控制Div層透明屬性由淺變深由深變淺逐漸顯示

    javascript控制Div層透明屬性由淺變深由深變淺逐漸顯示

    控制Div層透明屬性,由淺變深逐漸顯示,由深變淺逐漸消失,具體實(shí)現(xiàn)代碼如下,喜歡的朋友可以感受下
    2013-11-11
  • apply和call方法定義及apply和call方法的區(qū)別

    apply和call方法定義及apply和call方法的區(qū)別

    apply和call功能一樣,只是傳入的參數(shù)列表形式不同,本文給大家介紹apply和call方法定義及apply和call方法的區(qū)別,感興趣的朋友一起學(xué)習(xí)吧
    2015-11-11
  • webpack5 常用插件使用問題小結(jié)

    webpack5 常用插件使用問題小結(jié)

    webpack 是一個(gè)模塊打包器,這篇文章主要介紹了webpack5 常用插件使用問題小結(jié),每次打包完都需要手動(dòng)刪除掉dist文件目錄,使用CleanWebpackPlugin就可自動(dòng)清除dist目錄,感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • javascript中關(guān)于類型判斷的一些疑惑小結(jié)

    javascript中關(guān)于類型判斷的一些疑惑小結(jié)

    這篇文章主要給大家介紹了關(guān)于javascript中關(guān)于類型判斷的一些疑惑,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-10-10
  • Javascript小技能總結(jié)(推薦)

    Javascript小技能總結(jié)(推薦)

    本文是小編日常收集整理的有個(gè)js中的一些小技能,非常實(shí)用,值得推薦給大家,感興趣的朋友快來收藏吧
    2016-06-06
  • JavaScript移動(dòng)端常用事件之touch觸摸事件詳解

    JavaScript移動(dòng)端常用事件之touch觸摸事件詳解

    觸屏事件touch也稱為觸摸事件,touch對象代表一個(gè)觸摸點(diǎn),觸摸點(diǎn)可能是一根手指,也可能是一根觸摸筆,觸屏事件可響應(yīng)用戶手指(或觸摸筆)對屏幕或者觸控板操作,下面這篇文章主要給大家介紹了關(guān)于JavaScript移動(dòng)端常用事件之touch觸摸事件的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • 利用JS延遲加載百度分享代碼,提高網(wǎng)頁速度

    利用JS延遲加載百度分享代碼,提高網(wǎng)頁速度

    相信大家經(jīng)常在一些網(wǎng)站上看到有快捷分享到各大流行網(wǎng)站的按鈕,目前流行的有JiaThis、百度分享、Bshare等,目前用百度分享的居多
    2013-07-07
  • Javascript中的作用域和上下文深入理解

    Javascript中的作用域和上下文深入理解

    這篇文章主要介紹了Javascript中的作用域和上下文深入理解,本文講解了作用域 VS 上下文、變量作用域、“this”上下文、執(zhí)行上下文(Execution Context)、作用域鏈等內(nèi)容,需要的朋友可以參考下
    2015-07-07

最新評論