Ant Design Upload 上传后怎么拿到文件的 base64 内容？

Top丶莉娟提问于 2026-03-19 20:50:25 阅读 3

组件

我用 Ant Design 的 Upload 组件做图片上传，想在用户选择文件后直接预览，所以需要把文件转成 base64。但文档里没找到直接获取 base64 的方法，试了 beforeUpload 里读取 FileReader，结果总是 undefined 或者报错。

下面是我的代码，FileReader 的 onload 好像没触发，控制台也没输出。是不是写法有问题？或者有更简单的方式？

const beforeUpload = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    console.log(e.target.result); // 想在这里拿到 base64
  };
  reader.readAsDataURL(file);
  return false; // 阻止自动上传
};

Table组件

我来解答赞 1 收藏

反馈

1 条解答

FSD-依依 Lv1

你的代码逻辑没问题，onload 没触发大概率是 file 对象在传递过程中出了问题或者 reader 没等异步完成。

改成在 onChange 里拿，更稳：

const handleChange = (info) => {

  if (info.file.status === 'done' || info.file.status === 'uploading') {

    const file = info.file.originFileObj || info.file;

    const reader = new FileReader();

    reader.onload = (e) => {

      console.log(e.target.result); // base64

    };

    reader.onerror = () => console.error('读取失败');

    reader.readAsDataURL(file);

  }

};



<Upload beforeUpload={() => false} onChange={handleChange}>

如果非要在 beforeUpload 里搞，加个 onerror看看是不是文件本身有问题，还有确认 file 是不是个有效的 Blob 对象。

2026-03-19 21:01