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

10年積累的做網(wǎng)站、成都做網(wǎng)站經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有江川免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

https://github.com/iview/iview

官網(wǎng)是：

https://www.iviewui.com/

特性

• 使用單文件的 Vue 組件化開發(fā)模式
• 基于 npm + webpack + babel 開發(fā)，支持 ES2015
• 高質(zhì)量、功能豐富
• 友好的 API ，自由靈活地使用空間
• 詳細(xì)、友好的文檔，事無巨細(xì)

最近做一個后臺系統(tǒng)用的功能 總結(jié)下遇見的問題

功能需求點

• 上傳選擇文件 判斷文件格式
• 保存需要上傳的文件，展示文件名
• 提供刪除文件功能（未上傳前）
• 上傳文件
  

iView 提供的上傳組件

 瀏覽

Upload file: {{ item.name }} 
 X
 上傳

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

• multiple ： 是否支持多選文件 默認(rèn) false
• before-upload：上傳文件這前的事件鉤子，若返回 false 或者 Promise 則停止自動上傳
• show-upload-list： 是否顯示已上傳文件列表 默認(rèn)為true
• on-success: 上傳文件成功后的事件鉤子，返回 res(接口方返回的信息), file(上傳文件), fileList(上傳文件List)
• action： 文件上傳地址
  

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

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

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

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

這里如果是多文件的時候需要循環(huán)上傳一個一個來，如果一次上傳多個組件會報錯，只支持一次上傳一個文件，希望iView 以后會支持一次上傳多個吧，這個上傳我開始一直找不到，不知道手動上傳停止自己上傳后怎么手動傳，找功能找半天，在官方文檔里也沒有寫，官方到是有一個例子手動上傳的但：

并沒有事實上傳的操作 這里也只是模擬啦 上傳方法是在源碼里找到的

上傳成功后

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

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

• res 上傳結(jié)果 成功與失敗 上傳之后的地址
• file 此次上傳的文件
  

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

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

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

總結(jié)

以上所述是小編給大家介紹的vue iView 上傳組件之手動上傳功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！