van-uploader 压缩图片

在使用 van-uploader 组件上传图片时，如果需要在客户端进行图片压缩，可以使用JavaScript的 Canvas API来实现。以下是一个简单的示例，展示了如何在上传之前对图片进行压缩：

html
<template>
  <van-uploader
    v-model="fileList"
    :after-read="compressImage"
    accept="image/*"
  />
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    compressImage(file) {
      // 创建FileReader对象
      const reader = new FileReader();
      reader.readAsDataURL(file);

      reader.onload = (e) => {
        const img = new Image();
        img.src = e.target.result;

        img.onload = () => {
          // 设置压缩比例
          const quality = 0.7; // 压缩比例
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          const width = img.width;
          const height = img.height;

          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0, width, height);

          // 获取压缩后的图片
          const newImageData = canvas.toDataURL('image/jpeg', quality);

          // 创建新的Blob对象
          const blob = this.dataURLtoBlob(newImageData);
          const file = new File([blob], 'compressed_image.jpg', {
            type: 'image/jpeg',
          });

          // 使用压缩后的文件进行上传
          this.fileList = [file];
        };
      };
    },
    dataURLtoBlob(dataurl) {
      const arr = dataurl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }

      return new Blob([u8arr], { type: mime });
    },
  },
};
</script>

在这个示例中，compressImage 方法会在用户选择图片后被调用。它首先创建了一个 FileReader 对象来读取图片文件。当文件读取完毕后，它会在 img.onload 事件中使用 Canvas 进行图片压缩，并重新创建一个 File 对象用于上传。