Arco Upload上传后怎么拿到文件的临时路径？

紫萱提问于 2026-03-11 13:28:22 阅读 16

组件

我在用 Arco Design 的 Upload 组件做图片上传预览，想在用户选完文件后立刻显示缩略图。但文档里说 on-change 回调返回的是 file 对象，我试了 file.url 和 file.thumbUrl 都是 undefined，根本没法预览。

查了下好像得用 URL.createObjectURL() 手动生成？但不确定是不是最佳做法。有没有人知道 Arco Upload 选完文件后怎么正确获取能直接用在 img 标签里的临时路径？

const handleChange = (fileList) => {
  const file = fileList[0]?.originFile;
  if (file) {
    const url = URL.createObjectURL(file);
    setPreviewUrl(url); // 这样做对吗？
  }
};

Upload上传

我来解答赞 2 收藏

反馈

1 条解答

毅蒙 Lv1

你的做法是对的，Arco Upload 确实没帮你内置生成预览 URL，on-change 返回的 file.url 和 file.thumbUrl 在客户端预览场景下就是 undefined，这坑过不少人。

直接用 URL.createObjectURL(file) 生成的就是能在 img 标签里直接用的临时路径，没问题。

不过有个小坑要注意：这个 URL 是内存里的临时对象，不用的时候最好手动释放一下，不然会造成内存泄漏。可以在组件里这样处理：

const [previewUrl, setPreviewUrl] = useState('');



// 清理函数

useEffect(() => {

  return () => {

    if (previewUrl) {      URL.revokeObjectURL(previewUrl);

    }

  };

}, [previewUrl]);



const handleChange = (fileList) => {

  const file = fileList[0]?.originFile;

  if (file) {

    // 如果之前有旧的，先释放

    if (previewUrl) {

      URL.revokeObjectURL(previewUrl);

    }

    const url = URL.createObjectURL(file);

    setPreviewUrl(url);

  }

};

还有一点，你代码里用的是 fileList[0]?.originFile，这里要确认一下你用的是单文件上传还是多文件。单文件模式这样取没问题，如果是多文件就遍历 fileList 处理。

如果你的场景是上传到后端返回 URL 的那种， Arco 也支持自动生成预览，它内部会处理，但那是走上传流程的了，跟你这个即时预览需求不一样。

2026-03-11 14:00