uniapp压缩图片

上传图片前要进行压缩，因为图片过大，服务器会崩。
在uniapp中有uni.compressImage（）压缩图片方法
但是用了这个方法报错：compressImage is not yet implemented
原因很简单，不支持h5，心态炸裂，只好换种方法了，试好好会把好用的方法发布出来的。

通过canvas可以压缩，和参考的不同的是只需要beforeImageUpload就行了。
代码如下：

 <el-upload list-type="picture-card" :action="action" :show-file-list="false"
	  :on-success="handleSucess"  :before-upload="beforeImageUpload">
	  <img v-if="imageUrl" :src="imageUrl" class="avatar"  width="148" height="148"/>
	  <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>

js代码如下：

beforeImageUpload (file, fileList) {
   return new Promise(async (resolve, reject) => {
     if (!file.type.includes('image')) {
       this.$message.warning('请上传图片')
       reject(new Error('请上传图片'))
       return
     }
     this.isShowSpinning = true//上传之前弹框-或者成功函数中打开裁剪图片弹框
     const newFile = await this.compressImg(file)
     console.log(newFile.size,newFile,'压缩后图片大小---------------')
     resolve(newFile)
   })
 },
 // 图片压缩函数
 compressImg (file) {
   const that = this
   var files
   var fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2)
   var read = new FileReader()
   read.readAsDataURL(file)
   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) {
           // 如果图片小于一兆 那么压缩0.5
           base64 = canvas.toDataURL(file['type'], 0.5)
         } 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）
         files = that.dataURLtoFile(base64, file.name) // 如果后台接收类型为base64的话这一步可以省略
         resolve(files)
       }
     }
   })
 },
  // base64转码（压缩完成后的图片为base64编码，这个方法可以将base64编码转回file文件）
  dataURLtoFile (dataurl, filename) {
    var arr = dataurl.split(',')
    var mime = arr[0].match(/:(.*?);/)[1]
    var bstr = atob(arr[1])
    var n = bstr.length
    var u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, { type: mime })
  },

 handleSucess(res, file) {//这里上传已是走完:beforeImageUpload函数压缩后的图片
     console.log(file.size,file,'这里打印还是压缩之前的大小----');
     this.$nextTick(() => {//取dom更新之后的值
       this.option.img = URL.createObjectURL(file.raw);
       // this.option.img = URL.createObjectURL(this.newFile);//取到的值已是压缩后的图片，不需要从beforeImageUpload重新赋值给一个字段
       console.log(this.option.img,'打印出来的地址在浏览器下载看大小：是压缩之前的图片，但是上传成功后---后台返回url浏览器下载看大小-已经是压缩后的了，证明成功了-----------------')
     })
 },