在使用Upload這個(gè)組件的時(shí)候捻悯，我們會(huì)發(fā)現(xiàn)它其實(shí)有許多的小坑坑
1.在發(fā)送post請(qǐng)求時(shí)甩骏，由于項(xiàng)目中寫了攔截器和全局配置，所以需要針對(duì)上傳文件接口單獨(dú)配置請(qǐng)求頭和數(shù)據(jù)整理(qs)，
上傳文件的formdata不要使用Qs.stringify(config.data)整理囱淋，否則后臺(tái)拿不到文件數(shù)據(jù)掖棉，具體配置請(qǐng)看vue axios封裝http攔截和公用請(qǐng)求
?config.headers = {
? ? ? ? 'Content-Type': 'multipart/form-data'
?}
后面就是需要后臺(tái)支持了仍翰，讓他們用MultipartFile接收就行
2.當(dāng)文件上傳失敗的時(shí)候冯凹，會(huì)調(diào)用before-remove / on-remove鉤子。
根據(jù)fileUploadRemove方法梢薪，file是上傳失敗的文件B的信息蹬铺，此時(shí)this.fileList（保存上傳成功的文件）中并沒(méi)有保存文件B，因此findIndex會(huì)返回-1秉撇，導(dǎo)致最后會(huì)刪除this.fileList數(shù)組中的最后一個(gè)數(shù)據(jù)項(xiàng)甜攀。
因此，在執(zhí)行刪除操作的時(shí)候琐馆，需要添加一些判斷赴邻，確認(rèn)文件是否需要被刪除。
修改后的代碼如下：
beforeRemove(file,fileList){
? ? ? if(file && file.status === 'success'){
? ? ? ? //todo需要處理的事項(xiàng)
? ? ? }
},
3.刪除文件會(huì)觸發(fā)倆個(gè)鉤子before-remove / on-remove鉤子
handleRemove(file,fileList){
?? ? // todo清除文件數(shù)據(jù)的操作
? ? ? this.clearImportData()
?},
?beforeRemove(file,fileList){
? ? ? if(file && file.status === 'success'){
? ? ? ? return this.$confirm(`確定移除${file.name}啡捶？`)
? ? ? }
?},
