前端压缩图片

调用压缩
element  上传文件前
    //上传前
    beforeUpload(file) {
      console.log('上传前图片：',file);
      console.log("fileList",this.fileList)
      //文件压缩
      this.compressImg(file).then(res => {
        console.log('文件压缩回调：',res)
      })

      this.defaultNum++;
      if (this.defaultNum > this.uploadNum) {
        return false;
      }
    },


压缩方法
    compressImg(file) {
      var files
      var fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2)
      var read = new FileReader()
      read.readAsDataURL(file)
      var that = this;
      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）
            // 1.先转为 blob格式  file.content是此文件的base64格式
            var blob =  that.dataURLtoBlob(base64);
            // 拿到文件名
            var fileName = file.name;

            // 2，在转为 file类型
            var file_ys = that.blobToFile(blob,fileName);
            //console.log("file1:",file_ys);
            resolve(file_ys)
          }
        }
      })
    },