Element-ui 上传图片前压缩图片

在使用Element UI的<el-upload>组件上传图片时，可以在图片要上传之前使用JavaScript的Canvas API来压缩图片。以下是一个简单的例子，展示了如何在上传之前压缩图片：

<template>
  <el-upload
    action="https://your-upload-api"
    :before-upload="compressImage"
  >
    <el-button size="small" type="primary">点击上传图片</el-button>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    compressImage(file) {
      // 创建一个新的FileReader对象
      const reader = new FileReader();
      // 当文件读取完毕后，会触发load事件
      reader.onload = (e) => {
        const img = new Image();
        img.src = e.target.result;
        // 当图片加载完毕后，执行压缩和上传操作
        img.onload = () => {
          // 创建一个Canvas对象，并在其上绘制压缩后的图片
          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);
          // 将Canvas转换回一个Blob文件
          canvas.toBlob((compressedImageBlob) => {
            // 使用这个Blob对象作为文件进行上传
            const newFile = new File([compressedImageBlob], file.name, {
              type: file.type,
              lastModified: Date.now(),
            });
            // 此处调用上传操作，例如el-upload的action
            this.submitUpload(newFile);
          }, file.type || 'image/png');
        };
      };
      // 读取文件内容
      reader.readAsDataURL(file);
 
      // 阻止默认上传行为
      return false;
    },
    submitUpload(file) {
      // 这里可以使用Element UI的el-upload组件的action属性进行上传
      // 或者自定义上传逻辑
    },
  },
};
</script>

在这个例子中，compressImage方法会在文件被选中后触发。它首先使用FileReader读取文件，然后在文件读取完毕后，创建一个新的Image对象，并在图片加载完成后，使用Canvas绘制压缩后的图片，并将其转换回一个新的Blob文件，然后再使用这个文件进行上传操作。这里使用了canvas.toBlob方法来获取压缩后的文件，而不是使用canvas.toDataURL，因为toBlob可以直接得到一个Blob对象，更适合用于文件上传。最后，它返回false来阻止默认的上传行为，这样我们可以自定义上传逻辑。