1.問題描述
element中upload為我們提供了強(qiáng)大的上傳功能十电，往往我們可能用作單獨(dú)上傳某個(gè)文件揭保。但是在一個(gè)列表中肥橙，需要有多個(gè)同種類型的上傳組件，這時(shí)我們無法根據(jù)索引秸侣，將上傳的文件放置在對應(yīng)的數(shù)組索引中存筏，例如：
<ul>
<li v-for="(item, index) in List" :key="index">
<el-upload></el-upload>
</li>
</ul>
無法將學(xué)習(xí)資料1中上傳的文件對應(yīng)到學(xué)習(xí)資料數(shù)組中
2.如何解決？
思路味榛，在觸發(fā)上傳或者上傳成功時(shí)椭坚，在鉤子函數(shù)中傳入當(dāng)前索引，上傳成功后搏色，根據(jù)索引善茎，把上傳的文件放到數(shù)組里，這是我能想到最通俗易懂的方法频轿。
首先我們來看下element中upload的API
從以上圖片垂涯，我們可以看到，上傳的這幾個(gè)鉤子里面航邢，都沒有可以加的額外參數(shù)耕赘，那么直接在鉤子中加入索引是不現(xiàn)實(shí)的。
2.1解決一：修改源碼膳殷，在on-success回調(diào)中增加index索引
找到this.handleSuccess這個(gè)函數(shù),你會(huì)發(fā)現(xiàn)源碼中只有三個(gè)參數(shù)操骡，res, file,和this.uploadFiles，這與官方文檔中function(response, file, fileList)參數(shù)是一致的，現(xiàn)在我們來看下在這里面定義一個(gè)index參數(shù)后,on-success回調(diào)中当娱，返回的參數(shù)是什么
handleSuccess: function handleSuccess(res, rawFile) {
var file = this.getFile(rawFile);
if (file) {
file.status = 'success';
file.response = res;
this.onSuccess(res, file, this.uploadFiles);
this.onChange(file, this.uploadFiles);
}
},
- 項(xiàng)目里面找到node_modules/element-ui/lib/element-ui.common.js
- 在props里面加一個(gè)要父組件傳過來的參數(shù)bindIndex
onSuccess: {
type: Function,
default: noop
},
bindIndex: null,
onProgress: {
type: Function,
default: noop
},
- 可以在上面handleSuccess這個(gè)函數(shù)中加入這個(gè)參數(shù)
this.onSuccess(res, file, this.uploadFiles, this.bindIndex);
- 現(xiàn)在我們可以在el-upload中傳入這個(gè)參數(shù)了
<ul>
<li v-for="(item, index) in List" :key="index">
<el-upload :bindIndex="index" :on-success="handleSuccess"></el-upload>
</li>
</ul>
- 現(xiàn)在我們可以來看看handleSuccess(res,)這個(gè)回調(diào)里面參數(shù)會(huì)打印出什么
handleLearnDataSuccess (res, file, fileList, index) {
console.log(res, file, fileList, index)
let dialog = this.dialog
dialog.learningSource[index].content = {
image_path: res.url,
name: file.name
}
dialog.learningSource[index].file.push(file)
},
這就是我們要拿到的index
但是這種方法是有弊端的吃既，他實(shí)現(xiàn)的原理是修改包文件，但是方法使得其他協(xié)同工作的同事也要修改代碼跨细，才能正常運(yùn)行鹦倚。
2.2解決二：在調(diào)用回調(diào)時(shí)二次封裝，把默認(rèn)的參數(shù)和自己新增的參數(shù)作為一個(gè)新的函數(shù)返回
這里的index就是我們v-for出來的index冀惭，調(diào)用哪個(gè)upload震叙，就把相對應(yīng)的index傳進(jìn)去，上傳成功后散休，我們是不是就可以把文件與index聯(lián)系起來了呢
:on-success="(res,file)=>{return handleLearnDataSuccess(res,file,index)}"
當(dāng)然媒楼，這里用的是es6寫法，可能IE某些版本并不支持這種寫法戚丸，我們可以轉(zhuǎn)換一下划址，寫成普通函數(shù)
:on-success="function (res,file) {return handleLearnDataSuccess(res,file,index)}"
3.總結(jié)
解決問題的方法有很多種，但是要找到一個(gè)適合我們自己的才是最重要的限府。簡單總結(jié)下關(guān)于解決element-ui 中upload組件使用多個(gè)時(shí)無法綁定對應(yīng)的元素這個(gè)問題夺颤，我們可以有一下幾種方式：
- 修改源碼，在回調(diào)中加入索引參數(shù)
- 調(diào)用鉤子函數(shù)時(shí)胁勺，把自己新增參數(shù)與原有參數(shù)作為一個(gè)新的函數(shù)返回
