vue、js图片压缩上传

（ps：若为自动上传，请移步：https://www.cnblogs.com/gyw1996/p/15817667.html）

//封装js（压缩图片}
export function compress(fileObj, callback) {
  console.log('压缩前文件', fileObj)
  try {
    let initSize = fileObj.size
    let newFile = {}
    const image = new Image()
    image.src = URL.createObjectURL(fileObj)
    image.onload = function() {
      const that = this
      // 默认按比例压缩
      let w = that.width
      let h = that.height
      console.log(w)
      console.log(h)
      const scale = w / h
      w = fileObj.width || w
      h = fileObj.height || (w / scale)
      let quality = 0.7 // 默认图片质量为0.7
      console.log(fileObj.width)
      console.log(fileObj.height)
      console.log(w)
      console.log(h)
      // 生成canvas
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      // 创建属性节点
      const anw = document.createAttribute('width')
      anw.nodeValue = w
      const anh = document.createAttribute('height')
      anh.nodeValue = h
      canvas.setAttributeNode(anw)
      canvas.setAttributeNode(anh)
      console.log(canvas)
      ctx.drawImage(that, 0, 0, w, h)
      // 图像质量
      if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) {
        quality = fileObj.quality
      }
      // quality值越小，所绘制出的图像越模糊
      const data = canvas.toDataURL('image/jpeg', quality)
      console.log(data)
      console.log('压缩前：' + initSize)
      console.log('压缩后：' + data.length)
      console.log('压缩率：' + ~~(100 * (initSize - data.length) / initSize) + '%')
      if (Number(data.length) > Number(initSize)) {
        newFile = fileObj
        console.log('元')
      } else {
        // 压缩完成执行回调
        newFile = convertBase64UrlToBlob(data)
        console.log('后')
      }
      console.log('压缩后文件信息', newFile)
      callback(newFile)
    }
  } catch (e) {
    console.log('压缩失败!')
  }
}

// Base64 => 二进制（Blob）
function convertBase64UrlToBlob(urlData) {
  // 去掉url的头，并转换为byte
  const bytes = window.atob(urlData.split(',')[1])
  // 处理异常,将ascii码小于0的转换为大于0
  const ab = new ArrayBuffer(bytes.length)
  const ia = new Uint8Array(ab)
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i)
  }
  return new Blob([ab], { type: 'image/png' })
}

//使用js页面

  action
  class="upload-demo"
  ref="upload"
  :on-preview="handlePreview"
  :on-remove="towerFileRemove"
  :before-upload="beforeRead"
  :file-list="towerFileList"
  list-type="picture-card"
  multiple
  accept="image/png, image/jpg, image/jpeg"
  :auto-upload="false"
  :on-change="towerFileChange"
>