vue、js压缩上传图片（手动上传）

ps:自动上传请移步https://mp.csdn.net/mp_blog/creation/editor/122560016

1.封装的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 //图片原始高度
      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 合不合规范
      // 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' })
}

2.页面使用

<el-upload
  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"
>
  <i class="el-icon-plus"></i>
</el-upload>
<script>
import { compress } from '@/utils/imgUpload'//引入
xport default {
  data(){
  uploadParams:{}, 
  towerFileList:[] 
  },
methods:{
towerFileChange(file, fileList) {
  console.log("tower检测文件变动fileList=>", fileList);
  this.towerFileList = fileList;
  console.log("tower检测文件变动this.towerFileList=>", this.towerFileList);
  const that = this
  // 回显
  this.dialogImageUrl = URL.createObjectURL(file.raw)
  console.log(file.raw)
  console.log(this.dialogImageUrl)
  file.raw.width=200;//压缩的图片宽度,不传值用原宽度
  //file.raw.height=200;//压缩的图片高度（可根据传的高度同比放大缩小）
  file.raw.quality=0.1;//压缩的图片质量
  // 调用自定义的压缩方法
  compress(file.raw, function (val) {
    // 图片格式： blob => file
    let newFile = new window.File([val], file.name, { type: file.raw.type });
    console.log(newFile)
    newFile.uid = file.uid;
    // 新增属性（file）并赋值 （that.uploadParams传给后端的值，根据自己项目情况赋值）
    that.$set(that.uploadParams, 'file', newFile)
    console.log(that.uploadParams)
    // // 查看压缩后的图片路径
    console.log('newFileURL', URL.createObjectURL(val))
   })
  },
}
}
</script>