AntDesign VUE:上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制(Promise、Boolean)
文件大小限制 - Promise
checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size / 1024 / 1024 > rules ? reject() : resolve() }).then( () => { return true }, () => { this.$message.error(`文件大小不能超过 ${rules} MB`) return Promise.reject() } ) }
文件类型限制 - Promise
checkFileType(file, rules) { return new Promise((resolve, reject) => { rules && rules.includes(file.type) ? resolve() : reject() }).then( () => { return true }, () => { this.$message.error('请上传正确格式的图片,如jpg、png、jpeg') return Promise.reject() } ) }
图片宽高和比例限制 - Promise
checkImageWH(file, rules) { const _this = this return new Promise((resolve, reject) => { const filereader = new FileReader() filereader.readAsDataURL(file) filereader.onload = e => { const src = e.target.result const image = new Image() image.onload = function() { /** 图片宽度: this.width 图片高度: this.height */ // someBool ? resolve() : reject() } image.onerror = reject image.src = src } }).then( () => { return true }, () => { _this.$message.error('图片过于模糊/图片宽高比例不符,请重新上传') return Promise.reject() } ) },
视频宽高和比例限制 - Promise
checkVideoWH(file, rules) { return new Promise(function(resolve, reject) { var url = URL.createObjectURL(file) var video = document.createElement('video') video.onloadedmetadata = evt => { // Revoke when you don't need the url any more to release any reference URL.revokeObjectURL(url) // someBool ? resolve() : reject() } video.src = url video.load() // fetches metadata }).then( () => { return true }, () => { this.$message.error(`上传视频的宽高比例不符合要求,请重传${rules.rate[1] === 1 ? '等比视频' : (rules.rate[0] > 1 ? '横屏视频' : '竖屏视频')}`) return Promise.reject() } ) }
beforeUpload - Boolean
将已有且需要的条件拼起来,使用AntDesign Upload提供的 beforeUpload 作为Boolean判断已完成上传限制。
async beforeUpload(file) { const { filesSize, filesFormat, fileLimit} = this // 文件大小、文件类型、图片/视频宽高限制 const isFileSize = filesSize ? await this.checkFileSize(file, filesSize) : true const isFileType = filesFormat ? await this.checkFileType(file, filesFormat) : true if (fileLimit && fileLimit.type * 1 === 1) { const isImageLimit = fileLimit? await this.checkImageWH(file, fileLimit) : true return isFileSize && isFileType && isImageLimit } else if (fileLimit&& fileLimit.type * 1 === 2) { const isVideoLimit = fileLimit? await this.checkVideoWH(file, fileLimit) : true return isFileSize && isFileType && isVideoLimit } else { return isFileSize && isFileType } }
我的另一篇相关文章:AntDesign VUE:上传组件自定义限制的两种方式(Boolean、Promise)
参考文章:antd上传组件upload踩坑和封装.