在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)
            }
          }
        }
      }))
    },

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM