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

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

 

ant-design-vue中的beforeUpload是一个用于在文件上传进行处理的钩子函数。它可以用来验证文件类型、大小或进行其他自定义操作。 在使用beforeUpload时,你需要将其作为属性传递给上传组件(如Upload组件)中的beforeUpload属性。当用户选择文件并点击上传按钮时,beforeUpload函数将被调用。 示例代码如下: ```vue <template> <a-upload :beforeUpload="handleBeforeUpload" :action="uploadUrl" multiple > <a-button> <a-icon type="upload" /> 点击上传 </a-button> </a-upload> </template> <script> export default { data() { return { uploadUrl: '/api/upload', // 文件上传的接口地址 }; }, methods: { handleBeforeUpload(file) { // 在这里可以编写文件验证逻辑 const isJPG = file.type === 'image/jpeg'; if (!isJPG) { this.$message.error('只支持上传 JPG 格式的图片'); return false; // 返回false将取消文件上传 } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('图片大小不能超过 2MB'); return false; // 返回false将取消文件上传 } return true; // 返回true将继续文件上传 }, }, }; </script> ``` 在上述示例代码中,我们使用了ant-design-vueUpload组件和Button组件来实现文件上传功能。beforeUpload函数中的逻辑用于验证文件类型和大小,如果不满足要求,则通过this.$message.error方法给出错误提示,并返回false以取消文件上传。如果文件验证通过,则返回true以继续文件上传。 注意:以上代码仅为示例,实际使用时需要根据具体需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值