基于 Vue 的 UI 組件庫(kù)現(xiàn)在已經(jīng)有很多了，尤其是移動(dòng)端的。現(xiàn)在又多了一個(gè) iView 。

iView 主要服務(wù)于 PC 界面的中后臺(tái)業(yè)務(wù)，是一套高質(zhì)量的開(kāi)源 UI 組件庫(kù)，先上地址：

https://github.com/iview/iview

官網(wǎng)是：

https://www.iviewui.com/

特性

最近做一個(gè)后臺(tái)系統(tǒng)用的功能 總結(jié)下遇見(jiàn)的問(wèn)題

功能需求點(diǎn)

iView 提供的上傳組件

<Upload
 multiple
 ref="upload"
 :before-upload="handleUpload"
 :show-upload-list="false"
 :on-success="uploadSuccess"
 action="http://jsonplaceholder.typicode.com/posts/">
 <Button type="ghost" icon="ios-cloud-upload-outline">瀏覽</Button>
</Upload>
<div v-for="(item, index) in file">Upload file: {{ item.name }} 
 <a href="javascript:;" rel="external nofollow" @click="delectFile(item.name)">X</a>
 <Button style="margin-left:30px;"
 size="small"
 v-if="index === 0"
![](https://user-gold-cdn.xitu.io/2018/3/14/16223a8c12c38be9?w=649&h=743&f=png&s=55740)
 type="primary"
 @click="upload"
 :loading="loadingStatus">上傳</Button>
</div>

用到的API參數(shù) / 方法

上傳選擇文件 判斷文件格式 保存文件

選擇文件后會(huì)調(diào)用方法，在里面做的事情有 判斷文件類(lèi)型是否滿(mǎn)足需求，如果滿(mǎn)足就保存到需要上傳的文件List里，這里我們需要自己定義一個(gè)keyID,應(yīng)為是動(dòng)上傳需要展示，刪除功能，如果沒(méi)有唯一ID不知道刪除那個(gè)

這里如果允許文件上傳了不用但心什么，此鉤子會(huì)把選擇的當(dāng)數(shù)組一樣需要調(diào)用上文件事件前的鉤子事件，所以也不能但心多文件選擇只會(huì)生成一個(gè)KeyID

handleUpload (file) { // 上傳文件前的事件鉤子
 // 選擇文件后 這里判斷文件類(lèi)型 保存文件 自定義一個(gè)keyid 值 方便后面刪除操作
 let keyID = Math.random().toString().substr(2);
 file['keyID'] = keyID;
 // 保存文件到總展示文件數(shù)據(jù)里
 this.file.push(file);
 // 保存文件到需要上傳的文件數(shù)組里
 this.uploadFile.push(file)
 // 返回 falsa 停止自動(dòng)上傳 我們需要手動(dòng)上傳
 return false;
}

刪除功能

delectFile (keyID) { // 刪除文件
 // 刪除總展示文件里的當(dāng)前文件
 this.file = this.file.filter(item => {
 return item.name != name
 })
 // 刪除需要上傳文件數(shù)據(jù)里的當(dāng)前文件
 this.uploadFile = this.uploadFile.filter(item => {
 return item.KeyID != keyID
 })
}

上傳文件

upload () { // 上傳文件
 for (let i = 0; i < this.uploadFile.length; i++) {
 let item = this.file[i]
 this.$refs.upload.post(item);
 }
},

這里如果是多文件的時(shí)候需要循環(huán)上傳一個(gè)一個(gè)來(lái)，如果一次上傳多個(gè)組件會(huì)報(bào)錯(cuò)，只支持一次上傳一個(gè)文件，希望iView 以后會(huì)支持一次上傳多個(gè)吧，這個(gè)上傳我開(kāi)始一直找不到，不知道手動(dòng)上傳停止自己上傳后怎么手動(dòng)傳，找功能找半天，在官方文檔里也沒(méi)有寫(xiě)，官方到是有一個(gè)例子手動(dòng)上傳的但：

并沒(méi)有事實(shí)上傳的操作 這里也只是模擬啦 上傳方法是在源碼里找到的

上傳成功后

應(yīng)該我們的上傳文件功能和提交整個(gè)頁(yè)面的數(shù)據(jù)是分開(kāi)的 所以提交數(shù)據(jù)的時(shí)候需要驗(yàn)證選擇文件是否以上傳在上傳成功事件里讓后右把我們傳過(guò)去的數(shù)據(jù)返出來(lái)做清空待上傳文件數(shù)組里的數(shù)據(jù)，提交數(shù)據(jù)時(shí)候只需要判斷待上傳文件數(shù)組是否為空就可以了

文件上傳回調(diào)返回三個(gè)參數(shù)

uploadSuccess (res, file) { // 文件上傳回調(diào) 上傳成功后刪除待上傳文件
 console.log(response)
 console.log(file)
},

這里有個(gè)小問(wèn)題 應(yīng)該上傳的時(shí)候是循環(huán)調(diào)用上傳的，如果多個(gè)文件上傳這里會(huì)有多個(gè)回調(diào)結(jié)果不能成功一個(gè)文件提示用戶(hù)一次，所以需要處理一下，這里自定義一個(gè)數(shù)每次回調(diào)回來(lái)作自增處理，當(dāng)值與上待上傳文件的length 相等時(shí)才提示上傳結(jié)果

完整代碼GitHub地址 https://github.com/bailin240/ArticleCode/tree/master/view/iViewUpload

總結(jié)

以上所述是小編給大家介紹的vue iView 上傳組件之手動(dòng)上傳功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com