文件大小限制 - 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踩坑和封装.