vue实现压缩上传图片

• 写压缩方法

 compressImg(file) {
      var files
      var fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2)
      var read = new FileReader()
      read.readAsDataURL(file)
      return new Promise(function(resolve, reject) {
        read.onload = function(e) {
          var img = new Image()
          img.src = e.target.result
          img.onload = function() {
            // 默认按比例压缩
            var w = this.width
            var h = this.height
            // 生成canvas
            var canvas = document.createElement('canvas')
            var ctx = canvas.getContext('2d')
            var base64
            // 创建属性节点
            canvas.setAttribute('width', w)
            canvas.setAttribute('height', h)
            ctx.drawImage(this, 0, 0, w, h)
            if (fileSize < 1) {
              // 如果图片小于一兆 那么不执行压缩操作
              base64 = canvas.toDataURL(file['type'], 1)
            } else if (fileSize > 1 && fileSize < 2) {
              // 如果图片大于1M并且小于2M 那么压缩0.5
              base64 = canvas.toDataURL(file['type'], 0.5)
            } else {
              // 如果图片超过2m 那么压缩0.2
              base64 = canvas.toDataURL(file['type'], 0.2)
            }
            // 回调函数返回file的值（将base64编码转成file）
            resolve(base64)
          }
        }
      })
    },

• 引用方法

 getFile(file, fileList) {
      // console.log(file)
      const isImage = file.raw.type === 'image/png' || file.raw.type === 'image/jpg' || file.raw.type === 'image/jpeg'
      const isLt5M = file.size < 1024 * 1024 * 10
      if (!isImage) {
        this.$message.error('上传只能是png,jpg,jpeg格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }

      if (isImage && isLt5M) {
        this.compressImg(file.raw).then(res => {
          this.reses = res
          this.$emit('uploadpic', res)
          debugger
        })
      } else {
        fileList.splice(-1, 1)
      }
    },