vue+elementUI（el-upload）图片压缩，默认同比例压缩

这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况，我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储，结合elementUI的el-upload组件实现图片上传功能（简单来说就是用户是老大）

1、提取出压缩方法，放在公共方法.js文件里

/** 图片压缩，默认同比例压缩
 *  @param {Object} fileObj
 *  图片对象
 *  回调函数有一个参数，base64的字符串数据
 */
export function compress(fileObj, callback) {
  try {
    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
      // 生成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)
      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)
      // 压缩完成执行回调
      const newFile = convertBase64UrlToBlob(data)
      callback(newFile)
    }
  } catch (e) {
    console.log('压缩失败!')
  }
}
function convertBase64UrlToBlob(urlData) {
  const bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
  // 处理异常,将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上传组件

<el-form-item ref="uploadElement" prop="picUrl" class="upload-img-form" label-width="0">
  <el-upload
    ref="uploadxls"
    class="avatar-uploader upload-img"
    :disabled="disabled"
    :auto-upload="false"
    :style="{height:'66px', backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center', backgroundSize: '100%,100%'}"
    action="aaa"
    ::limit="1"
    :show-file-list="false"
    :on-change="handlePictureCardPreview"
    :before-upload="beforeupload"
    accept="image/png,image/gif,image/jpg,image/jpeg"
  >
    <!--<img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">-->
    <i v-if="!dialogImageUrl" class="el-icon-plus avatar-uploader-icon" />
    <!--<i v-show="!dialogImageUrl" class="upload-icon" />
    <div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上传实景图</div>-->
    <div v-if="showDelete" class="remove-img"><i class="el-icon-delete" @click.stop="removeImg" /></div>
    <div slot="tip" class="el-upload__tip">
      <p><span style="color:#F5222D;">*</span>上传楼宇实景图</p>
      <p>支持：.jpg .png .gif格式 建议比例：16:9，小于10M</p>
    </div>
  </el-upload>
</el-form-item>

3、主要在handlePictureCardPreview方法里调用压缩方法

先在当前vue页面import公共js文件

import { compress } from '@/utils'

然后

// 图片预览
handlePictureCardPreview(file) {
  const _that = this
  const isLt10M = file.size / 1024 / 1024 < 10
  if (!isLt10M) {
    this.$message.error('上传图片大小不能超过 10M!')
    return false
  } else {
    this.dialogImageUrl = URL.createObjectURL(file.raw)
    compress(file.raw, function(val) {
      _that.theForm.picUrl = val
      _that.imgFile = val
      _that.showDelete = true
      _that.$refs['addBuildingForm'].validateField('picUrl')
    })
  }
}

compress传入file.raw作为fileObj

这样只要上传图片就进行图片压缩