AntD上传组件
第一种方式
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)