el-upload 上传图片及压缩

 <el-upload 
    :multiple="false" 
    :on-change="Upload"
    :show-file-list="false" 
    :auto-upload="false"
>
    <img v-if="url" :src="url" />
    <div v-else class="upload-z">+</div>
</el-upload>

 Upload(file) {
      const that = this

      const arr = ['jpeg', 'jpg', 'png', 'bmp']
      if (!arr.includes(that.regE(file.name, '.'))) {
        that.$message.error('图片只支持png,jpg,jpeg和bmp格式!')
        return
      }

      const reader = new FileReader()
      // ?将读取到的文件编码成DataURL
      reader.readAsDataURL(file.raw)
      // ?压缩图片
      reader.onload = function(ev) {
        try {
          if (file.size / 1024 / 1024 >= 5) {
            // ?读取图片来获得上传图片的宽高
            const img = new Image()
            img.src = ev.target.result
            img.onload = function(ev) {
              // ?将图片绘制到canvas画布上进行压缩
              const canvas = document.createElement('canvas')
              const context = canvas.getContext('2d')
              const imgwidth = img.width
              const imgHeight = img.height
              // ?按比例缩放后图片宽高;
              let targetwidth = imgwidth
              let targetHeight = imgHeight
              // ?/如果原图宽大于最大宽度
              if (targetwidth > targetHeight) {
                // ?原图宽高比例
                const scale = targetHeight / 1080
                ;(targetHeight = 1080), (targetwidth = targetwidth / scale)
              } else {
                // ?原图宽高比例
                const scale = targetwidth / 1920
                targetwidth = 1920
                targetHeight = targetHeight / scale
              }
              //  ?缩放后高度仍然大于最大高度继续按比例缩小
              canvas.width = targetwidth //canvas的宽=图片的宽
              canvas.height = targetHeight //canvas的高=图片的高
              context.clearRect(0, 0, canvas.width, canvas.height)
              context.drawImage(this, 0, 0, canvas.width, canvas.height)
              let data = ''

              //该参数设置输出图片的质量，取值区间是0-1，默认为0.92,值越小，图片质量越模糊
              let quality = 0.6
              data = canvas.toDataURL(img.src, quality)
              
              that.src= data  //回显
              that.uploadE(request) //上传接口
            }
          } else {
            console.log('小于', file)
           that.src= reader.result

            that.uploadE(request) //上传接口
          }
        } catch (error) {
          console.log('出现错误', error)
        }
      }
    },