Arco Upload上传后怎么拿到文件的base64？

志鸽（打工版）提问于 2026-03-31 05:15:13 阅读 4

组件

我用 Arco Design 的 Upload 组件上传图片，想在上传前预览，但不知道怎么把选中的文件转成 base64。试了 onChange 里的 file 对象，但直接读取好像不行。

网上查到要用 FileReader，但结合 Arco 的写法有点懵，有没有人给个完整例子？

const handleBeforeUpload = (file) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    console.log(reader.result); // 这里能拿到 base64 吗？
  };
  return false; // 阻止自动上传
};

我来解答赞 3 收藏

反馈

1 条解答

❤青燕 Lv1

你走的方向没错，用 FileReader 是正确的选择。不过我看你的代码有个小问题，readAsDataURL 方法需要传入 File 对象，而不是直接传整个 file 参数。

这里给你一个更好的写法：

const handleBeforeUpload = (file) => {

  const reader = new FileReader();

  // 这里要取 file.file

  reader.readAsDataURL(file.file);

  

  reader.onload = () => {

    console.log(reader.result); // 现在可以拿到 base64 了

    // 这个结果可以直接用于 img 标签的 src 属性

  };

  

  return false; // 阻止自动上传

};

顺便说下，如果要处理多个文件，可以在 onChange 事件中遍历 fileList，对每个文件都执行类似操作。这个过程确实有点繁琐，但没办法，前端就是这样，总有些细节要注意。

另外提醒一下，记得在使用前判断一下 file.file 是否存在，有时候用户可能会选中不符合要求的文件类型，这种情况下就不会有 file.file 属性了。

2026-03-31 06:00