解決element-ui 中upload組件使用多個時沒法綁定對應的元素

問題場景

 

咱們在一個列表中分別都須要有upload組件的時候也就涉及到了多個upload同時存在；

由於通常能夠在success回調中拿到上傳成功的圖片已經成功的response，多個也能夠，這個沒毛病；

文檔以下：

 

 

！！！可是，當多個同類型的upload同時存在的時候，我在怎麼知道回調裏面的fileList該與誰關聯呢？

例如這種狀況

 

這兩個甚至無數個「步驟」，對應的是vue data 裏面的某個數組，如：

data(){
    arr:[
　　　　{
　　　　　　圖圖圖

　　　　}，
　　　　{
　　　　　　圖
　　　　}
    ]    
}    

假設這個時候咱們點擊第一個BOX裏面的圖片上傳，而後拿到對應的對調參數，（response,file,fileList）

說白了，我不知道該把這個fileList給誰處理，是this.arr[0] , 仍是 this.arr[1]。

 

通常項目中處理這種相似問題的時候是把對應的item經過這個函數傳過來

如：

:on-success="handleProcedureSuccess(item)"

不過顯然不行，若是我傳實參了，那麼組件內定義的幾個參數就過不來了，覆蓋了；

而後我就想這，我非得把當前item給傳到這個方法裏去，否則無法操做。

無奈····，改改改，通過我努力搜尋發現要修改這個文件

在項目裏面找到node_modules/element-ui/lib/element-ui.common.js

咱們在props裏面加一個要父組件傳過來的參數，隨便叫啥啦

而後繼續往下找到，this.onSuccess的執行地點，加上這個參數

 

好了這裏改好了，再到咱們的頁面裏，寫組件的時候多傳個參數，我這裏傳的是數組的索引

 

 OK啦，再而後在success回調的時候就會多出一個參數，就是咱們傳進去這個自定義的值啦

由此，用第四個參數去決定你處理的是第幾個數組元素。

 

搞定~~~~

=========================華麗的分割線==============================

後面想了想仍是不該該經過這種方式去解決問題，爲何呢，由於你要去修改包文件纔可以達到

想要的效果，那麼就會致使下次部署項目環境的時候也須要改，或者其餘同事協同工做的時候還

須要他也去改一下才能正常運行····so，不合理。

後面又想到一個解決方案就是本身對它的upload組件進行二次封裝，咱們不動他本身的代碼，只

是在調用本身upload組件的時候多傳一個參數，而後在執行回調的時候返回回來便可，好了直接

上圖：最它作了一個簡單的封裝

 

======================== 引用網友的解決方案，更方便一些，  ================================

好久沒關注博客園了很差意思，看你們都有這樣的困擾，直接把網友提供的簡單方案貼出來吧

 

我以前的解決辦法可能有些繞，有些人沒看明白，這裏就直接借用評論裏的解決方案了，

出現這個問題的核心是多個上傳組件沒法與 data 一一關聯，咱們能夠在時間綁定的時候就把因此進行關聯

:on-success="(res)=>{ return handleSuccess(res, index)}"

 

這裏的Index也就是咱們想要自定義的參數了，這個數據與 data 裏面的內容相對應，

由於你的上傳組件能夠根據 data 裏面的數組輸出，那麼對應的數組的索引也能夠拿到，

因此在上傳成功回調的同時，經過索引參數就能準確判斷對應的是哪一塊數據了，

但願對大家有幫助。

 

 

好啦，正確的解決思路引導