最近做一個后臺系統(tǒng)用的功能 總結(jié)下遇見的問題
功能需求點
- 上傳選擇文件 判斷文件格式
- 保存需要上傳的文件题山，展示文件名
- 提供刪除文件功能（未上傳前）
- 上傳文件
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:;" @click="delectFile(item.name)">X</a>
<Button style="margin-left:30px;"
size="small"
v-if="index === 0"
type="primary"
@click="upload"
:loading="loadingStatus">上傳</Button>
</div>
用到的API參數(shù) / 方法
- multiple ： 是否支持多選文件 默認 false
- before-upload：上傳文件這前的事件鉤子，若返回 false 或者 Promise 則停止自動上傳
- show-upload-list： 是否顯示已上傳文件列表 默認為true
- on-success: 上傳文件成功后的事件鉤子，返回 res(接口方返回的信息), file(上傳文件), fileList(上傳文件List)
- action： 文件上傳地址
上傳選擇文件 判斷文件格式 保存文件
選擇文件后會調(diào)用方法，在里面做的事情有 判斷文件類型是否滿足需求，如果滿足就保存到需要上傳的文件List里，這里我們需要自己定義一個keyID,應(yīng)為是手動上傳需要展示，刪除功能朝氓，如果沒有唯一ID不知道刪除那個
這里如果允許多文件上傳也不用但心什么，此鉤子會把選擇的文件當數(shù)組一樣調(diào)用上傳件事件前的鉤子事件 handleUpload 主届，所以也不用但心多文件選擇只會生成一個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) { // 刪除文件
// 刪除總展示文件里的當前文件
this.file = this.file.filter(item => {
return item.name != name
})
// 刪除需要上傳文件數(shù)據(jù)里的當前文件
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 以后會支持一次上傳多個吧枫夺，這個手動上傳開始一直沒找到，不知道手動如何上傳調(diào)用事件绘闷，找功能找半天橡庞，在官方文檔里也沒有寫较坛，官方到是有一個例子手動上傳的但：
并沒有事實上傳的操作 這里也只是模擬啦 上傳方法是在源碼里找到的
上傳成功后
應(yīng)為我們的上傳文件功能和提交整個頁面的數(shù)據(jù)是分開的， 所以提交數(shù)據(jù)的時候需要驗證選擇文件是否以上傳扒最。在上傳成功事件回調(diào)里讓后臺把我們傳過去的數(shù)據(jù)返出來做清空待上傳文件數(shù)組里的數(shù)據(jù)（注：主要是拿到文件的keyID 做刪除）丑勤，提交數(shù)據(jù)時候只需要判斷待上傳文件數(shù)組是否為空就可以了
文件上傳回調(diào)返回三個參數(shù)
- res 上傳結(jié)果 成功與失敗 上傳之后的地址
- file 此次上傳的文件
- fileList 文件需要上傳的數(shù)組數(shù)據(jù)
uploadSuccess (res, file,fileList) { // 文件上傳回調(diào) 上傳成功后刪除待上傳文件
console.log(response)
console.log(file)
console.log(fileList)
},
這里有個小問題，應(yīng)為上傳的時候是循環(huán)調(diào)用上傳的吧趣，如果多個文件上傳這里會有多個回調(diào)結(jié)果不能成功一個文件提示用戶一次法竞，所以需要處理一下，這里自定義一個數(shù)每次回調(diào)回來作自增處理再菊，當值與上待上傳文件的length 相等時才提示上傳結(jié)果
