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 -