Prime React中移除已完成上传文件的onRemove参数传递问题

核心原因 #

PrimeReact的FileUpload组件在自动后台上传模式下，默认仅跟踪待上传/上传中的文件对象，上传完成后会从组件内部的files数组中移除相关条目，导致点击移除按钮时onRemove无法拿到有效文件参数。

解决方案：手动维护已上传文件列表 #

放弃依赖组件自带的文件跟踪，自行通过state管理已完成上传的文件信息，结合自定义渲染模板实现移除时的参数传递。

1. 定义状态存储已上传文件 #

import { useState, useRef } from 'react';
import { FileUpload } from 'primereact/fileupload';
import { Button } from 'primereact/button';

const UploadComponent = () => {
    // 自行维护已上传文件列表，存储后端返回的文件信息+原文件必要字段
    const [uploadedFiles, setUploadedFiles] = useState([]);
    const fileUploadRef = useRef(null);

    // 格式化文件大小辅助函数
    const formatFileSize = (size) => {
        if (size < 1024) return `${size} B`;
        if (size < 1048576) return `${(size / 1024).toFixed(2)} KB`;
        return `${(size / 1048576).toFixed(2)} MB`;
    };

2. 配置FileUpload组件，上传成功后更新本地状态 #

return (
        <div>
            <FileUpload
                ref={fileUploadRef}
                auto={true}
                url="/api/upload" // 替换为你的实际上传接口
                accept="image/*,.pdf,.doc" // 根据需求调整可上传文件类型
                onUploadSuccess={(event) => {
                    // 上传成功后，组装需要的文件信息存入state
                    const newFile = {
                        id: event.response.fileId, // 后端返回的文件唯一标识
                        name: event.file.name,
                        size: event.file.size,
                        url: event.response.fileUrl // 可选：后端返回的文件访问地址
                    };
                    setUploadedFiles(prev => [...prev, newFile]);
                    // 清空组件内部的文件列表，避免显示上传完成的残留条目
                    fileUploadRef.current?.clear();
                }}
                customUploadTemplate={() => null} // 禁用默认上传模板，改用自定义列表
            />

            {/* 自定义已上传文件展示列表 */}
            <div className="mt-4">
                <h5>已上传文件</h5>
                {uploadedFiles.length === 0 ? (
                    <p>暂无已上传文件</p>
                ) : (
                    <div className="flex flex-wrap gap-2">
                        {uploadedFiles.map(file => (
                            <div key={file.id} className="flex items-center gap-2 p-2 border rounded">
                                <span>{file.name} ({formatFileSize(file.size)})</span>
                                <Button
                                    label="移除"
                                    severity="danger"
                                    size="small"
                                    onClick={() => handleRemoveFile(file)}
                                />
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
};

3. 实现移除逻辑 #

const handleRemoveFile = async (file) => {
        // 1. 调用后端删除接口（根据实际业务调整）
        try {
            await fetch(`/api/files/${file.id}`, { method: 'DELETE' });
            // 2. 更新本地状态，移除对应文件
            setUploadedFiles(prev => prev.filter(item => item.id !== file.id));
        } catch (error) {
            console.error('删除文件失败:', error);
            // 可添加错误提示逻辑
        }
    };

为什么这种方式更可靠？ #

• 完全掌控已上传文件的状态和数据，不受组件内部逻辑限制
• 移除按钮直接绑定目标文件对象，无需依赖组件的onRemove回调，彻底避免参数为null的问题
• 自定义渲染模板可以更灵活地扩展功能（比如添加文件预览、下载按钮等）

内容的提问来源于stack exchange，提问作者Samet Dağ