問題場景
我們在一個列表中分別都需要有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 里面的數組輸出,那么對應的數組的索引也可以拿到,
所以在上傳成功回調的同時,通過索引參數就能准確判斷對應的是哪一塊數據了,
希望對你們有幫助。
好啦,正確的解決思路引導