使用Payload CMS REST API上传文件报错：无法读取title属性

可能的原因及排查步骤 #

1. 检查DemoCollection集合配置 #

• 确认文件字段的relation配置关联的媒体集合存在，且该集合已正确定义title字段。例如你的DemoCollection中有如下文件字段：

  {
    name: 'document',
    type: 'upload',
    relation: 'media',
  }
  

  需保证media集合里明确包含title字段定义，否则后端处理关联数据时会找不到对应属性。
• 检查DemoCollection自身的title字段配置：如果集合设置了admin.useAsTitle: 'title'，必须确保字段列表中存在title字段的定义。

2. 验证前端上传的表单数据结构 #

• Payload上传文件要求使用multipart/form-data格式，前端必须正确构造表单数据，不能遗漏必填字段。若DemoCollection中title为必填项，需在FormData中显式添加：

  const formData = new FormData();
  formData.append('title', '测试文档标题');
  formData.append('document', file);
  

• 检查前端字段名拼写，避免将title误写为其他名称（如Title），导致后端无法识别字段，对应属性为undefined。

3. 排查后端钩子函数逻辑 #

• 如果DemoCollection配置了beforeChange等钩子，检查函数中是否存在未判断数据存在性就读取data.title的情况。示例修正：

  hooks: {
    beforeChange: [
      ({ data }) => {
        if (!data) return;
        const processedTitle = data.title?.trim();
        // 其他处理逻辑
      }
    ]
  }
  

  未做存在性判断时，若前端提交数据缺失，会直接触发该错误。

4. 调试请求数据 #

• 前端发送请求前打印FormData内容，确认所有必填字段已正确添加；后端通过打印req.body和req.files，查看接收的数据结构是否符合预期，定位哪个环节导致title所属对象变为undefined。

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