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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_38789941/article/details/97628317

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