React.js中Minio文件上传后无法打开问题求助

你用readAsDataURL获取的结果是完整的Data URL（格式为data:[<mediatype>];base64,<data>），直接拿这个字符串做Buffer.from的base64解码，会把前缀部分也当成有效数据处理，导致上传到Minio的文件包含无效内容，自然无法正常打开。

1. 从Data URL里剥离前缀，只保留纯base64编码的内容
2. 用纯base64字符串生成Buffer
3. 上传时指定文件的Content-Type，让Minio正确识别文件类型

const [fileData, setFileData] = useState(); // 用户选择的文件存储在fileData状态中

const uploadObj = () => {
  const fileBuffer = new FileReader();
  fileBuffer.readAsDataURL(fileData);

  fileBuffer.onload = function () {
    // 提取Data URL中的纯base64部分
    const base64Raw = fileBuffer.result.split(',')[1];
    // 生成正确的Buffer
    const buf = Buffer.from(base64Raw, "base64");
    // 获取原文件的MIME类型
    const fileType = fileData.type;

    // 上传时指定Content-Type，同时保留原文件名
    mc.putObject("BucketName", fileData.name, buf, fileType, function (err, etag) {
      console.log(err, etag);
    });
  };

  fileBuffer.onerror = function (error) {
    console.log("Error: ", error);
  };
}

额外提示：如果不需要保留原文件名，把fileData.name替换成你想要的自定义文件名即可。

内容的提问来源于stack exchange，提问作者Gibson