Next14 Server Actions上传文件至PocketBase失败求助

问题场景 #

使用Next14结合Server Actions将文件对象上传至PocketBase数据库时，触发必填字段缺失错误，尽管服务端已正确接收到文件对象。

前端提交代码 #

const incrementStep = async (values) => {
        const data = new FormData()
        for(const[key, value] of Object.entries(values)){
            data.append(`${key}`, `${value}`)
        }
        data.append("file", values.PictureObject)
        StepOneDoctorAction(data)
        // setActiveStep((step) => step + 1)
    }

服务端接收的数据 #

{
  Name: 'regregre',
  LastName: 'ergergerger',
  PhoneNumber: 'gergerger',
  LicenseNumber: 'ergregre',
  Nationality: 'Lietuvis',
  DateOfBirth: 'Wed, 18 May 2022 21:00:00 GMT',
  PictureObject: '[object File]',
  Gender: 'Vyras',
  file: File {
    size: 95222,
    type: 'image/png',
    name: 'hotel.png',
    lastModified: 1706257080088
  }
}

提交至PocketBase的代码 #

try {
            const data = {
                "UserId": pb.authStore.model.id,
                "Name": val.Name,
                "LastName": val.LastName,
                "PhoneNumber": val.PhoneNumber,
                "LicenseNumber": val.LicenseNumber,
                "Nationality": val.Nationality,
                "BirthDay": dayjs(val.DateOfBirth).format("YYYY-MM-DD"),
                "Gender": val.Gender,
                "file:": val.file
            };
            await pb.collection('DoctorDetails').create(data);
        } catch (error) {
            return 
        }

报错信息 #

file: Missing required value.（该字段已在PocketBase后台设置为必填）

解决方案 #

1. 修正字段名错误 #

提交代码中"file:"多了一个冒号，PocketBase无法识别这个字段，需要改为"file"。

2. 使用FormData传递文件数据 #

PocketBase处理文件上传时，不能直接传递普通JavaScript对象（文件对象无法被正确序列化），必须使用FormData构造请求体。

修改后的提交代码：

try {
    const formData = new FormData();
    formData.append("UserId", pb.authStore.model.id);
    formData.append("Name", val.Name);
    formData.append("LastName", val.LastName);
    formData.append("PhoneNumber", val.PhoneNumber);
    formData.append("LicenseNumber", val.LicenseNumber);
    formData.append("Nationality", val.Nationality);
    formData.append("BirthDay", dayjs(val.DateOfBirth).format("YYYY-MM-DD"));
    formData.append("Gender", val.Gender);
    formData.append("file", val.file); // 字段名修正为file
    
    await pb.collection('DoctorDetails').create(formData);
} catch (error) {
    console.error(error); // 建议添加错误日志便于排查
    return;
}

3. 优化前端FormData构造（可选） #

前端循环append时，将File对象转成了字符串${value}，导致PictureObject变成[object File]，可以优化判断逻辑，避免File对象被错误转换：

const incrementStep = async (values) => {
    const data = new FormData()
    for(const[key, value] of Object.entries(values)){
        // 针对File对象直接append，其他类型正常处理
        data.append(key, value instanceof File ? value : `${value}`);
    }
    // 此时无需单独append file，循环已处理PictureObject
    StepOneDoctorAction(data)
    // setActiveStep((step) => step + 1)
}

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