AntDesign VUE：上传组件自定义限制的两种方式（Boolean、Promise）

AntD上传组件

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 -