Ant Design Upload上传后怎么拿到文件的base64编码？

W″文仙提问于 2026-03-02 21:17:20 阅读 4

组件

我用 Ant Design 的 Upload 组件上传图片，想在上传前把文件转成 base64 用于预览，但不知道怎么在 onChange 里获取到 base64。试过用 FileReader，但总是拿不到结果，控制台还报错。

现在代码大概是这样：

const handleChange = (info) => {
  const file = info.file.originFileObj;
  const reader = new FileReader();
  reader.readAsDataURL(file);
  console.log(reader.result); // 这里是 null
};

是不是因为 readAsDataURL 是异步的？那该怎么正确拿到 base64 呢？

我来解答赞 1 收藏

反馈

1 条解答

Air-红敏 Lv1

你判断得没错，readAsDataURL 确实是异步的。FileReader 读取文件需要时间，你直接在下一行打印 reader.result，这时候文件还没读完呢，当然是 null。

前端这块处理文件读取，得用回调函数来拿结果。正确写法是在 onload 回调里获取：

const handleChange = (info) => {

  const file = info.file.originFileObj;

  

  if (file) {

    const reader = new FileReader();

    reader.onload = (e) => {

      console.log(e.target.result); // 这里就是 base64 了

      // 想存到 state 里做预览的话，在这里 setState

    };

    reader.readAsDataURL(file);

  }

};

如果你嫌回调写法麻烦，可以封个 Promise 版本，配合 async/await 更舒服：

const getBase64 = (file) => {

  return new Promise((resolve, reject) => {

    const reader = new FileReader();

    reader.onload = () => resolve(reader.result);

    reader.onerror = (error) => reject(error);

    reader.readAsDataURL(file);

  });

};



const handleChange = async (info) => {

  const file = info.file.originFileObj;

  if (file) {

    try {

      const base64 = await getBase64(file);

      console.log(base64);

    } catch (err) {

      console.error('读取失败', err);

    }

  }

};

顺便提醒一下，originFileObj 只有在文件刚选中的时候有值，上传成功后可能就没了，所以要在合适的时机去取。另外大文件转 base64 会很大，小心别把内存撑爆。

2026-03-02 21:20