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

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

 

 

這種方法也適用多個上傳組件的情況,就是要定義好相應組件的file-list