AntDesign VUE:上传组件自定义限制的两种方式(Boolean、Promise)

时间:2024-01-16 08:03:08

AntD上传组件

AntDesign VUE:上传组件自定义限制的两种方式(Boolean、Promise)

AntDesign VUE文档

第一种方式

beforeUpload(file) {
let isLt = true
if (filesSize) {
isLt = file.size / 1024 / 1024 <= filesSize
if (!isLt) {
this.$message.error('文件大小不能超过' + filesSize + 'MB!')
}
} return isLt
}

这种方式写起来快速简单,但是组件中会留下一个可删除交互的上传痕迹,并且未返回响应数据。甚至还可能图片上传这个阶段还是完成了,组件依然发送了upload的http请求,这显然是一个不合理的交互效果。

第二种方式

通过Promise实现相同效果

beforeUpload(file) {
const _this = this
return new Promise(function(resolve, reject) {
if (file.size / 1024 / 1024 > filesSize) {
_this.$message.error(`文件大小不能超过 ${filesSize} MB`)
reject()
} else {
resolve()
}
})
}

这样在判断失败时,图片不会执行上传的任何步骤。

阅读我的另一篇文章,以了解上传图片和视频能做到的多种限制:

AntDesign VUE:上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制(Promise、Boolean)

- END -