Vue-AntDesign >>上传组件:beforeUpload上传前检查问题
在使用Upload这个组件的时候,我们会发现它其实又许多的小坑坑。如果我们在beforeUpload中直接返回true或者是false,那么它其实也是会上传文件的,因为它也会触发onChange函数。步骤重现:handleBeforeUpload(file){const sizeOk = file.size <1024 * 300;const typeOk = file....
·
在使用Upload这个组件的时候,我们会发现它其实又许多的小坑坑。
如果我们在beforeUpload
中直接返回true或者是false,那么它其实也是会上传文件的,因为它也会触发onChange函数。
步骤重现:
handleBeforeUpload(file){
const sizeOk = file.size <1024 * 300;
const typeOk = file.type ==='image;
if (!typeOk) {
message.error('照片格式有误!');
} else {
if (!sizeOk) {
message.error('照片大小超过300K!');
}
}
return sizeOk && typeOk;
}
期待效果:
当上传错误格式的照片,提示格式错误,但不显示任何效果
执行效果:
当上传错误格式的照片,提示格式错误,但界面上显示了“文件上传中”
代码修改:
handleBeforeUpload(file){
const sizeOk = file.size <1024 * 300;
const typeOk = file.type ==='image;
return new Promise((resolve, reject) => {
if(!typeOk) {
message.error('照片格式有误!');
reject(file);
} else if(!sizeOk) {
message.error('照片大小超过300K!');
reject(file);
}else {
resolve(file);
}
});
}
更多推荐
已为社区贡献1条内容
所有评论(0)