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 -


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM