如何使用FormData同时上传多文件及关联字段？

你的核心问题出在两个地方：

• 用同一个FormData同时提交多条记录的字段，PocketBase的create接口是用来创建单条记录的，这种格式服务端无法识别
• 直接循环发起请求时没正确处理异步逻辑，导致请求被浏览器/框架中断

以下是修正后的代码，同时兼顾批量效率和请求稳定性：

export default function AddPhotosAdmin({ photosDb }: PhotoDisplayProps) {

    async function addPhotos(formData: FormData) {
        'use server'

        const name = formData.get("name") as string
        const images = Array.from(formData.getAll("Image")) as File[]
        const pb = new PocketBase(process.env.DB_ADDR);

        // 用Promise.all并行处理所有上传请求
        await Promise.all(images.map((image, index) => {
            const recordData = new FormData();
            recordData.append('name', name);
            recordData.append('image', image); // 注意和集合字段名保持一致，原代码写的Image，集合字段是image的话要修正大小写
            recordData.append('order', index.toString()); // 直接用数组索引作为递增的order值

            return pb.collection('Photos').create(recordData);
        }));

        revalidatePath("/Photos")
    }
    
    return (
        <div>
            <form action={addPhotos} className="text-black">
                <input name="name" placeholder="输入图片组名称" />
                <input
                    type="file"
                    name="Image"
                    required
                    multiple
                    accept="image/*"
                    className="text-white"
                />
                <input type="submit" className="text-white" value="上传" />
            </form>
        </div>
    )
}

关键说明： #

• 每张图片对应独立的FormData和create请求，完全符合PocketBase的单条记录创建规范
• 用Promise.all并行处理上传，比串行循环效率更高
• 直接利用数组的index作为order值，天然实现递增，无需额外维护计数器
• 必须给create方法加await，否则请求还未完成就执行revalidatePath，会导致页面刷新后数据不同步

如果遇到浏览器并发限制导致请求失败，可以改成串行循环处理：

// 替换原Promise.all部分
for (let index = 0; index < images.length; index++) {
    const image = images[index];
    const recordData = new FormData();
    recordData.append('name', name);
    recordData.append('image', image);
    recordData.append('order', index.toString());
    
    await pb.collection('Photos').create(recordData);
}

可选错误处理： #

如果需要避免单张图片上传失败导致整个批量任务中断，可以添加捕获逻辑：

return pb.collection('Photos').create(recordData).catch(err => {
    console.error(`第${index+1}张图片上传失败:`, err);
    // 这里可以添加错误记录、提示用户等后续处理
});

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