頁面中使用多個element-ui upload上傳組件時綁定對應元素

原創

roongyan92

2020-02-20 18:08

elemet-ui裏提供的upload文件上傳組件,功能很強大,能滿足單獨使用的需求,但是有時候會存在多次複用上傳組件的需求,如下圖的樣子,這時候就出現了問題,頁面上有多個上傳組件時,要怎麼操作呢?

之前在網上找到了一位大神的方法,修改源碼,在回調函數中多加一個參數,但是這種方法在多人開發時不太適用,因爲這要求所有人都要修改源碼,這裏附上大神的方法,大家可以酌情使用

首先在你下個包裏面找到node_modules/element-ui/lib/element-ui.common.js

然後在裏面的props裏多加一個傳遞的參數,自定義參數名

接着往下找到你需要用到的函數,在參數里加上你新增的這個參數

這樣就改好啦,回到項目中,在引用的時候把這個參數傳進去,一般是索引,如果是在循環中,就傳index

傳參之後,在你剛剛改過的回調函數中就能拿到這個值了,這樣就能得到循環中的每一個upload組件

 handleProcedureSuccess (res, file, fileList, index) {

    // 前面三個參數是組件默認的,最後一個參數是我們傳進去的

  }

這樣通過修改源碼傳參的方法就實現了,大神還提供了另一種方法,就是對組件進行二次封裝,不過沒太看懂,有興趣的可以去大神的博客看看,以下是文章地址

https://www.cnblogs.com/AlexBlogs/p/7150532.html

其實還有一種簡便的寫法,也算是二次封裝,不過是直接在調用的時候寫

通過這種閉包的寫法,把默認的參數和自己新增的參數作爲一個新的函數返回,也可以實現功能,這裏要注意一下,這裏最好不要用箭頭函數的寫法,因爲有些IE不支持es6語法,可能會頁面出不來,寫成這種普通函數就好了

還有一種需求應該也挺經常用到的,那就是上傳按鈕的隱藏,官方並沒有提供隱藏的方法,雖然有提供限制的方法,但是還是更想達到上傳圖片張數到上限後就把上傳框隱藏,這裏分享一種方法,通過CSS控制上傳框的隱藏

先在CSS中定義好樣式,在組件中通過動態添加類名的方式控制隱藏,這裏是結合element-UI table表格一起使用,通過文件列表的length控制

在這裏補充一下自己遇到的坑,我的上傳組件是放在表格裏生成的,表格可以增刪,但是我上傳圖片之後重新生成表格,上傳的圖片卻刪除不了,如下圖

看了官網提供的方法,clearFiles但是不生效,還有百度的說把fileList清空,但是都不行,最後把組件打印出來,發現上傳的圖片時存在uploadFiles屬性裏,只要把uploadFiles置空就可以清除頁面上上傳的圖片了

放一下頁面的代碼

// 我的upload是放在table組件裏的
　　　　　　<el-table-column
              prop="imageUrl"
              :label="LANMSG.specifications.picture">
              <template slot-scope="scope">
                <el-upload
                 class="avatar-uploader"
　　　　　　　　　　　// ref設置的不一樣
                  :ref="getUpload(scope.$index)"
                  :class="{disabled: scope.row.imageUrl}"
                  :action="uploadPath"
                  :on-success="function (res,file){return handleImgSuccess(res,file,scope.$index)}"
                  :data="uploadData"
                  :limit="1"
                  :before-upload="checkFile"
                  list-type="picture-card"
                  :on-remove="function (res,file){return handleImgRemove(res,file,scope.$index)}">
                  <!-- <img style="width: 60px; height: 60px;" v-if="scope.row.imageUrl" :src="scope.row.imageUrl" alt="" class="avatar"> -->
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </template>
            </el-table-column>
                      
// js 代碼
// 組件是循環的,我給他的ref也是不一樣的

getUpload (i) {
      return `upload${i}`
    },

// 生成規格列表
    addTable () {
        let upload = 'upload'
        this.productInfo.skuList.forEach((v, i) => {
          upload = `upload${i}`
          console.log(this.$refs[upload])
// 把每一項的uploadFiles重置爲空
          if (this.$refs[upload]) {
            this.$refs[upload].uploadFiles = []
          }
        })
      }
    },

還有一種情況,就是上傳文件失敗時,頁面上的文件列表不會自動刪除,會給用戶一種上傳成功的錯覺.這時可以在success的回調函數中手動刪除,前提是一定要記得綁定file-list