在before-upload方法中对图片文件进行处理,并返回处理后的文件

beforeUpload方法中,除了可以返回图片校验时的true/false,还可以以return new Promise的方式返回文件,如返回文件,则上传时,以返回的文件为准上传。

eg:

beforeAvatarUpload(file) {
      // console.log('上传前',file)
      const that = this
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 4

      return (new Promise((resolve, reject) => {
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG 格式!')
          reject()
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
          reject()
        }
        if (this.isWH) {
          const that = this
          const url = window.URL || window.webkitURL
          const img = new Image() // 手动创建一个Image对象
          img.src = url.createObjectURL(file)// 创建Image的对象的url
          img.onload = function() {
            if (that.width != this.width || that.height != this.height) {
              that.$notify({
                title: '失败',
                message: `上传图片分辨率建议${that.width}*${that.height},宽度不可超过${that.width}px,高度不超过${that.height}px!`,
                type: 'error',
                duration: 3000
              })
              that.$emit('IsImgValid')
              reject()
            } else {
              resolve(file)
            }
          }
        }
      }))
    },

 

posted @ 2020-07-08 15:45  小小淼  阅读(3266)  评论(0)    收藏  举报