在使用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}?`)
}
},