【uni-app】小程序与H5压缩图片上传

目录

场景:上传图片过大导致接口响应时间过长

方法：上传前进行图片压缩

微信小程序压缩方法

H5压缩图片方法

 简单使用场景

---

场景:上传图片过大导致接口响应时间过长

方法：上传前进行图片压缩

话不多说直接贴代码

我们先定义一个工具文件，类如utils.js

微信小程序压缩方法

/**
  * 递归压缩微信图片
  * @param url 图片路径
  * @param count 已递归次数（有可能压缩不到想要的大小，所以得限制次数）
  * @param isReturnBase64 是否返回base64
  * @param callback 回调函数
  * @return
  */
export function recursionCompressWechat(url, count, isReturnBase64, callback) {
  // 在递归五次后结束递归
  if (count > 5) {
    if (isReturnBase64) {
      WechatTobase4(url)
    } else {
      callback && callback(url);
    }
    return;
  }
  // 将图片进行压缩
  uni.compressImage({
    src: url, // 图片路径
    quality: 40, // 压缩质量
    success: (resCompress: any) => {
      console.log(resCompress, "压缩后");
      // 先获取压缩后的体积，大于1M就继续压缩
      uni.getFileInfo({
        filePath: resCompress.tempFilePath,
        success: (resFileInfo: any) => {
          if (resFileInfo.size > 1024 * 1024) {
            //压缩后大于1M就继续压缩
            count++;
            recursionCompressWechat(resCompress.tempFilePath, count, isReturnBase64, callback);
            return;
          } else {
            if (isReturnBase64) {
              WechatTobase4(resCompress.tempFilePath)
            } else {
              callback && callback(resCompress.tempFilePath)
            }
          }
        },
      });
    },
    fail: (resCompress) => {
      callback(url);
    },
  });
   
  // 微信-url转base64
  function WechatTobase4(url) {
    uni.getFileSystemManager().readFile({
      filePath: url, //选择图片返回的相对路径
      encoding: "base64", //编码格式
      success: async (res) => {
        callback && callback("data:image/" + "png" + ";base64," + res.data);
      },
      fail: (res) => {
        console.log(res, "wxPathTobase64-error");
      },
    });
  }
}

H5压缩图片方法

由于uniapp的uni.compressImage方法不支持H5，所以我们自己封装一个简易的图片压缩方法

/**
  * 递归压缩H5图片
  * @param url 图片路径
  * @param isReturnBase64 是否返回base64
  * @param callback 回调函数
  * @return
  */
export function recursionCompressH5(url, isReturnBase64, callback) {
  uni.getImageInfo({
    src: url,
    success(res) {
      let canvasWidth = res.width; //图片原始长宽
      let canvasHeight = res.height;
      let img = new Image();
      img.src = res.path;
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      canvas.width = canvasWidth / 2;
      canvas.height = canvasHeight / 2;
      ctx.drawImage(img, 0, 0, canvasWidth / 2, canvasHeight / 2);
      canvas.toBlob(function (fileSrc) {
        let imgSrc = window.URL.createObjectURL(fileSrc);
        uni.getFileInfo({
          filePath: imgSrc,
          success: (resFileInfo: any) => {
            if (resFileInfo.size > 1024 * 1024) {
              //压缩后大于1M就继续压缩
              recursionCompressH5(imgSrc, isReturnBase64, callback);
              return;
            } else {
              //小于就转化base64
              let resultBase64 = canvas.toDataURL("image/png")
              callback && callback(!isReturnBase64 ? resultBase64: imgSrc)
            }
          },
        });
      });
    }
  });
}

 简单使用场景

// 常用的上传组件
//HTML部分
<u-upload
    ref="uUpload"
    max-count="9"
    :auto-upload="true"
    :action="action"
    :before-upload="handleBeforeUpload"
>
</u-upload>


    import { recursionCompressH5, recursionCompressWechat } from "@/utils.js"
    //JS部分
    // 上传图片钩子函数
    handleBeforeUpload(index, lists) {
      this.handlerecursionCompressH5(lists[index].url);
      return false;
    },

    handlerecursionCompress(url) {
      if (isH5) {
        // H5压缩 -- 最后一个参数为业务上传图片代码方法
        recursionCompressH5(url, true, this.handleUpload);
      } else {
        // 小程序
        recursionCompressWechat(url, 1, true, this.handleUpload);
      }
    },

    handleUpload() {
        //....
        //上传压缩后的图片
    }

上传组件u-upload的before-upload钩子函数相信大家都不陌生，我们在钩子函数里面对图片进行压缩，压缩完成后执行上传操作

 // 上传图片钩子函数
    handleBeforeUpload(index, lists) {
      this.handlerecursionCompressH5(lists[index].url);
      return false;
    },

    handlerecursionCompress(url) {
      if (isH5) {
        // H5压缩
        recursionCompressH5(url, true, this.handleUpload);
      } else {
        // 小程序
        recursionCompressWechat(url, 1, true, this.handleUpload);
      }
    },

如果能帮助到大家可以点赞评论收藏三连~