ant-design-pro-vue 文件上传 upLoad 组件的一些使用经验

ant-design-pro-vue 文件上传 upLoad 组件的一些使用经验

因为工作中需要使用文件上传功能上传附件，公司的后台使用 ant-design-pro + vue 作为前端开发技术栈，因此使用了 ant-design-pro-vue 里面的 upLoad 组件来进行开发。在开发过程中遇到了一些问题，现将一些问题分享出来，希望能帮到后面遇到类似问题的小伙伴尽快脱坑。

组件上传的状态没有改变

猜测原因： 是由于对象数组中对象的浅拷贝导致数组没有监测到数据的改变，无法更新状态。
处理方式： 每次修改完状态后将文件列表数组重新赋值。

    this.fileList = [...fileList] // fileList 是我在项目中存放文件列表对象数组的属性值

使用自定义上传组件时删除文件会报错

猜测原因： 报错好像是 .abort() 找不到这个方法。因为目前业务的上传附件逻辑是将文件上传至服务器上的临时文件夹，删除文件时只需要删除文件列表中该文件的对象即可，不需要其他操作。所以也不需要用这个 .abort() 方法，但是组件的自定义上传方法的源码里面好像默认有执行 abort() 方法。
处理方式： 我发现在多文件上传时，一次性选择多个文件，beforeUpload 回调会执行多次（次数为选中文件的个数），因此，我考虑索性不用官方给的自定义上传函数了，直接在 beforeUpload 函数中把文件对象处理了之后直接上传。

	beforeUpload (file, fileList) {
		// 先进行上传文件的验证，不符合上传要求的文件直接 return false 不给继续执行
		this.validateFile() // 自定义文件上传验证
		this.upLoadFile() // 自定义上传文件，通过接口把文件存至服务器临时目录下
		return false // 记住最后一定要 return false 来取消组件的默认上传，否则会报错
	}

前端初学者，对源码的理解还不够深入，upLoad 组件使用也还不够多，写这个的主要原因是加深自己的理解，有机会提升自己的能力，以后若有遇到新问题会继续更新，如果恰好碰到有遇到同样问题，希望能为你解决问题提供帮助！