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踩坑和封装.

- END -