如何在CUBA Platform的data collection中获取并添加实体图片数据

1 排查现有数据集合结构 #

你console.log仅能看到FN、LN字段，是因为当前数据集合的初始结构中没有定义头像相关字段，先补全字段配置：

• 单条用户数据的标准结构参考如下，新增avatar字段用于存储头像数据：

{
  FN: "名",
  LN: "姓",
  avatar: "" // 字段值可存base64编码、远程图片地址或本地File对象，根据业务需求选类型
}

• 如果你使用的是带Schema校验的数据集合格式（比如低代码平台的集合、MongoDB集合），需要先在后台的集合字段管理中新增avatar字段，再进行数据写入。

2 获取头像实体数据 #

根据你的业务场景选择对应获取方式：

2.1 用户主动上传场景 #

给文件上传控件绑定事件，读取头像数据：

// 绑定上传控件change事件
document.querySelector('#avatar-upload').addEventListener('change', (e) => {
  const selectFile = e.target.files[0]
  // 方案A：直接转base64存储到数据集合
  const reader = new FileReader()
  reader.onload = (res) => {
    const avatarData = res.target.result
    // 后续将avatarData写入对应数据项的avatar字段即可
  }
  reader.readAsDataURL(selectFile)

  // 方案B：上传到服务端存储，返回远程URL存储到数据集合
  // const formData = new FormData()
  // formData.append('avatar', selectFile)
  // 调用上传接口拿到返回的url，赋值给avatar字段
})

2.2 系统生成默认头像场景 #

可以直接用用户的姓名字符串生成唯一默认头像值，比如拼接姓名首字母生成svg头像地址，直接赋值到avatar字段即可。

3 写入数据集合并验证 #

找到对应要更新的用户数据项，完成字段赋值：

// 示例：更新users数组中id为targetId的用户的头像
const targetUser = users.find(item => item.id === targetId)
if (targetUser) {
  targetUser.avatar = avatarData // 你前面拿到的头像数据
}
// 验证输出，此时可以看到完整的FN、LN、avatar三个字段
console.log(users)

如果你使用Vue、React等带响应式状态管理的框架，需要遵循框架的状态更新规则修改数据，避免响应式丢失导致console.log无法打印到新增字段。

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