当前位置: 代码迷 >> 综合 >> Vue-AntDesign 上传组件:beforeUpload上传前检查问题
  详细解决方案

Vue-AntDesign 上传组件:beforeUpload上传前检查问题

热度:36   发布时间:2023-12-27 06:56:47.0

在使用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);}});
}