上传文件beforeUpload校验文件大小、格式、图像分辨率等

 

beforeUploadCheck(file, conf) {
      const { maxSize = 100, width: fileWidth, height: fileHeight, maxWidth: fileMaxWidth } = conf
      const fileType = file.type.startsWith('video')
      const isGtMaxSize = file.size / 1024 / 1024 <= maxSize
      if (!isGtMaxSize && maxSize) {
        this.$message.error(`请上传不超过${maxSize}MB的${fileType ? '视频' : '图片'}!`)
        return false
      }
      let isSize = true
      //
      if (fileWidth || fileHeight || fileMaxWidth) {
        const width = fileWidth
        const height = fileHeight

        if (fileType) {
          isSize = new Promise(function(resolve, reject) {
            const _URL = window.URL || window.webkitURL

            const videoUrl = _URL.createObjectURL(file)
            const videoObj = document.createElement('video')
            videoObj.onloadedmetadata = function(evt) {
              _URL.revokeObjectURL(videoUrl)

              if (fileMaxWidth) {
                const valid = videoObj.videoWidth <= fileMaxWidth && (!fileHeight || videoObj.videoHeight === height)
                valid ? resolve() : reject()
              } else {
                const valid = videoObj.videoWidth === width && (!fileHeight || videoObj.videoHeight === height)
                valid ? resolve() : reject()
              }
            }
            videoObj.src = videoUrl
            videoObj.load() // 触发 onloadedmetadata
          }).then(
            () => {
              file.fileType = FILE_TYPE_DICT.VIDEO
              return file
            },
            () => {
              if (fileMaxWidth) {
                this.$message.error(`请上传不大于${fileMaxWidth}宽的视频`)
              } else {
                this.$message.error(
                  conf.message
                    ? conf.message
                    : `请上传分辨率为${fileWidth}${fileHeight ? '*' + fileHeight : '*高度不限'}的视频!`
                )
              }
              return Promise.reject()
            }
          )
        } else {
          isSize = new Promise(function(resolve, reject) {
            const _URL = window.URL || window.webkitURL

            const img = new Image()
            img.onload = function() {
              if (fileMaxWidth) {
                console.log(img.width, fileMaxWidth)
                const valid = img.width <= fileMaxWidth && (!fileHeight || img.height === height)
                valid ? resolve() : reject()
              } else {
                const valid = img.width === width && (!fileHeight || img.height === height)
                valid ? resolve() : reject()
              }
            }
            img.src = _URL.createObjectURL(file)
          }).then(
            () => {
              file.fileType = FILE_TYPE_DICT.IMAGE
              return file
            },
            () => {
              if (fileMaxWidth) {
                this.$message.error(`请上传不大于${fileMaxWidth}宽的图片`)
              } else {
                this.$message.error(
                  conf.message
                    ? conf.message
                    : `请上传分辨率为${fileWidth}${fileHeight ? '*' + fileHeight : '*高度不限'}的图片!`
                )
              }
              return Promise.reject()
            }
          )
        }
      }
      return isSize
}