vue+H5移动端实现图片压缩上传

应用场景：在前端需要把图片通过接口上传到云端来获取图片id或url传给后端的时候如果是用的input file的方法来获取图片的时候有些移动端浏览器是不支持图片过大的，这个时候就需要将图片压缩，下面是操作方面

<template>
  <div>
    <!-- 获取图片 -->
    <div>
      <input
        ref="fileInput"
        type="file"
        accept="image/*"
        @change="handleFileChangeXC"
      />
      <canvas ref="canvas" style="display: none"></canvas>
    </div>
  </div>
</template>

<script>
import { getfileUpload } from "@/api/index";

export default {
  data() {
    return {
      imageDataUrl1: "",
      imgBlib: {},
    };
  },
  methods: {
    // 上传图片
    handleFileChangeXC(event) {
      // 压缩
      const canfile = event.target.files[0];
      if (!canfile) {
        return;
      }
      const canreader = new FileReader();
      canreader.onload = (e) => {
        const canimg = new Image();
        canimg.onload = () => {
          const canCompression = 0.1; //压缩参数,0.1压缩为原图10%
          const canvas = this.$refs.canvas;
          const ctx = canvas.getContext("2d");
          const ratio = Math.min(
            canimg.width / canvas.width,
            canimg.height / canvas.height
          );
          canvas.width = canimg.width / ratio;
          canvas.height = canimg.height / ratio;
          ctx.drawImage(canimg, 0, 0, canvas.width, canvas.height);
          canvas.toBlob(
            (blob) => {
              // 这里可以处理压缩后的图片blob，比如上传到服务器
              console.log(blob); 
              this.imgBlib = blob; // 把压缩好的blob文件存储到data定义的字段里
              // 调用阿里接口上传图片
              const files = event.target.files;
              if (files.length > 0) {
                const file = files[0];
                const originalLastModified = file.lastModified;
                const originalFileName = file.name;
                const originalFileType = file.type;
                console.log(file);
                // 合并
                const newFile = new File([this.imgBlib],originalFileName, file, {
                  type: originalFileType,
                  lastModified: originalLastModified,
                });
                console.log(newFile, "合并的");
                // 调用阿里接口
                getfileUpload({ // 阿里的接口，这里换成你们自己的接口
                  file: newFile,
                }).then((res) => {
                  this.imageDataUrl1 = res.data.data.annex_id;//拿到阿里回馈的id
                });
              }
            },
            "image/jpeg",
            canCompression
          );
        };
        canimg.src = e.target.result;
      };
      canreader.readAsDataURL(canfile);
    },
  },
};
</script>

这样的解决方案只适用于在上传图片的时候因为图片过大无法成功调取阿里接口的时候来应用，一些其他的操作可以自己在代码中增加。此外，在input file获取图片的时候在移动端也会调出相机，这个可以解决相机拍照生成的图片过大无法上传到阿里接口，大家在用的时候可以根据自己的实际情况来调整压缩的参数。如果有同学在使用的时候有其他的问题可以评论区留言讨论