在使用Upload这个组件的时候，我们会发现它其实有许多的小坑坑
1.在发送post请求时，由于项目中写了拦截器和全局配置，所以需要针对上传文件接口单独配置请求头和数据整理(qs)，
上传文件的formdata不要使用Qs.stringify(config.data)整理，否则后台拿不到文件数据，具体配置请看vue axios封装http拦截和公用请求
config.headers = {
'Content-Type': 'multipart/form-data'
}
后面就是需要后台支持了，让他们用MultipartFile接收就行
2.当文件上传失败的时候，会调用before-remove / on-remove钩子。
根据fileUploadRemove方法，file是上传失败的文件B的信息，此时this.fileList（保存上传成功的文件）中并没有保存文件B，因此findIndex会返回-1，导致最后会删除this.fileList数组中的最后一个数据项。
因此，在执行删除操作的时候，需要添加一些判断，确认文件是否需要被删除。
修改后的代码如下：
beforeRemove(file,fileList){
if(file && file.status === 'success'){
//todo需要处理的事项
}
},
3.删除文件会触发俩个钩子before-remove / on-remove钩子
handleRemove(file,fileList){
// todo清除文件数据的操作
this.clearImportData()
},
beforeRemove(file,fileList){
if(file && file.status === 'success'){
return this.$confirm(`确定移除${file.name}？`)
}
},
网友评论