antd upload 上传图片前压缩图片的大小到5M 内再以二进制形式上传

在Ant Design (antd) 的 Upload 组件中，如果你需要在上传图片之前对图片进行压缩以控制其大小不超过5MB，你可以按照以下步骤操作：

首先，你需要安装`sharp`库，这是一个Node.js库用于处理图像文件，可以方便地进行缩放和优化：

npm install sharp

然后，在上传文件的处理器函数（通常在`beforeUpload`回调中）添加图片压缩的部分。这里是一个示例代码片段：

import { beforeUpload } from 'antd/lib/upload';
import sharp from 'sharp';

const compressImage = async file => {
  if (!file.type.startsWith('image/')) {
    // 如果不是图片文件，则直接返回true继续上传
    return true;
  }

  const originalSize = file.size; // 获取原始大小

  try {
    // 使用sharp进行压缩
    const resizedBuffer = await sharp(file.buffer)
      .resize(800, { fit: 'inside', withoutEnlargement: true })
      .toBuffer(); // 设置最大尺寸并转换为二进制数据

    // 计算新的文件大小
    const newFileSize = resizedBuffer.length;

    // 如果压缩后的文件大于5MB，再次压缩直到满足条件
    while (newFileSize > 5 * 1024 * 1024) {
      resizedBuffer = await sharp(resizedBuffer).resize(Math.floor(newFileSize / 2), null);
      newFileSize = resizedBuffer.length;
    }

    // 将压缩后的二进制数据替换原文件
    file.buffer = resizedBuffer;

    // 返回true表示处理成功，可以继续上传
    return true;
  } catch (error) {
    console.error('Error compressing image:', error);
    // 返回false表示处理失败，阻止上传
    return false;
  }
};

// 更新beforeUpload钩子
const uploadOption = {
  beforeUpload,
  onBeforeUpload: compressImage,
};

在上述代码中，我们先检查文件是否为图片，然后通过`sharp`压缩图片，如果压缩后仍然超过5MB，会不断地缩小图片直到符合条件。最后将压缩后的二进制数据赋值给文件。