Antd Upload自定义itemRender问题：新上传文件不显示预览

核心问题分析 #

你的CustomItemRender组件存在两个关键错误：

1. 错误引用了fileList.url，应该使用当前单个文件的file.url
2. 新上传的本地文件未完成服务器上传，没有现成的url字段，需要通过URL.createObjectURL生成本地预览地址

修复后的代码 #

1. 修正CustomItemRender组件 #

const CustomItemRender = ({ file, onPreview, onRemove }) => {
  // 生成预览地址：已上传文件用服务器返回的url，本地待上传文件用临时URL
  const previewUrl = file.url || (file.originFileObj && URL.createObjectURL(file.originFileObj));

  return (
    <div className="custom-item-renderer">
      <img src={previewUrl} alt={file.name} />
      <div className="buttons flex mt-1 ">
        <Button size="small" onClick={() => onPreview(file)}>
          View
        </Button>
        <Button size="small" onClick={() => onRemove(file)}>
          Delete
        </Button>
      </div>
    </div>
  );
};

2. 优化Upload组件配置 #

确保回调函数正确绑定，同时添加内存泄漏防护（可选）：

// 组件内添加清理函数，卸载时释放本地预览URL
useEffect(() => {
  return () => {
    fileList.forEach(file => {
      if (file.originFileObj) {
        URL.revokeObjectURL(file.originFileObj);
      }
    });
  };
}, [fileList]);

// Upload组件配置
<Upload
  showRemoveIcon={true}
  showDownloadIcon={true}
  multiple={true}
  accept="image/*" // 建议限制为图片格式
  fileList={fileList}
  action="/your-upload-api" // 补充你的实际上传接口地址
  onChange={handleChange}
  onPreview={handlePreview}
  beforeUpload={beforeUpload}
  onRemove={onRemove}
  itemRender={CustomItemRender}
>
  {fileList?.length <= 9 ? uploadButton : null}
</Upload>

关键说明 #

• file.url：已上传至服务器的文件会携带该字段，对应服务器返回的文件地址
• file.originFileObj：本地待上传的原始文件对象，通过URL.createObjectURL可生成临时预览链接
• 组件卸载时调用URL.revokeObjectURL释放内存，避免内存泄漏
• 父组件中的onPreview和onRemove需接收单个file参数，而非整个fileList

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