问题描述
之前使用 element-ui 上传文件时，也仅涉及到上传「单个」文件，也经常在 before-upload 钩子中限制文件类型和大小，没出现什么问题。但是这次需求需要上传「多个」文件，并且限制文件类型和大小，如果按照之前的做法，校验不通过时，返回 false，那已经上传的文件就会被删除。对了，使用的是文件列表展示，结构如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<el-upload
class="upload-demo"
action=""
:on-remove="handleRemove"
accept="image/jpeg,image/png"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList"
:http-request="uploadPic"
:on-success="onSuccess"
:before-upload="beforeUpload"
>
<div>请选择附件</div>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload>
问题排查
首先，只要是 before-upload 校验不通过，都会进入 on-remove 钩子，查阅相关资料，得出的结论是：这是 element-ui 的机制，如果校验不通过，返回的是布尔类型的 false ，上传流程就会被中断，重置整个 「fileList」，因此之前成功上传的文件都会被删除。
解决方案
校验不通过时，不返回 false ，而是返回 Promise.reject()，这样能停止上传并保持原有的文件列表不变。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt500KB = file.size / 1024 < 500;
if (!isJPG) {
this.$message.error('只能上传 JPG/PNG 格式的图片');
return Promise.reject();
}
if (!isLt500KB) {
this.$message.error('图片大小不能超过 500KB');
return Promise.reject();
}
return true;
},
