如何在GraphQL Schema中定义React Native iOS应用向后端发送的图片？

针对React Native端拍照上传的场景，目前GraphQL生态有两种主流的实现方案，Schema定义分别如下：

方案1：基于GraphQL Multipart Request规范（推荐，适配大体积高清图） #

这是目前行业内的主流实现方案，不需要修改原生端网络底层配置，生态适配完善。

Schema定义 #

# 自定义Upload标量，Apollo Server、GraphQL Yoga等主流服务端框架均内置该标量的实现，无需额外开发解析逻辑
scalar Upload

# 上传请求的入参定义
input UserPhotoUploadInput {
  # 必填：拍照获取的图片文件
  photo: Upload!
  # 可选：业务拓展参数，比如拍摄位置、关联业务ID、图片备注等
  shootLocation: String
  relatedBusinessId: ID
  remark: String
}

# 上传接口返回结果定义
type PhotoUploadResponse {
  success: Boolean!
  # 服务端存储后生成的图片可访问地址
  imageUrl: String
  # 图片唯一标识，用于后续业务逻辑调用
  imageId: ID
  # 上传失败时的错误提示
  errorMessage: String
}

type Mutation {
  # 用户拍照上传接口
  uploadUserShootPhoto(input: UserPhotoUploadInput!): PhotoUploadResponse!
}

方案优势 #

• 无base64编解码开销，适合原生端高清拍照大文件传输
• 符合GraphQL生态标准，服务端适配成本低
• React Native端配合apollo-upload-client包可直接适配，不需要手动处理文件格式转换，拍照拿到的本地文件对象可直接传入mutation参数

方案2：Base64编码直传（仅适合小体积压缩图/缩略图） #

如果你的业务场景只需要传输压缩后的小体积图片，不想引入额外的上传依赖，可以选择该方案，不需要自定义标量。

Schema定义 #

# 上传请求的入参定义
input UserPhotoBase64UploadInput {
  # 必填：base64编码后的图片内容，通常带data:image/[format];base64,前缀
  photoBase64: String!
  shootLocation: String
  relatedBusinessId: ID
  remark: String
}

type Mutation {
  # 用户拍照上传接口
  uploadUserShootPhotoBase64(input: UserPhotoBase64UploadInput!): PhotoUploadResponse!
}

注意事项 #

• base64编码会使数据体积增加约33%，高清原图不推荐使用，会大幅增加传输耗时和流量消耗
• 服务端需要自行实现base64解码和文件存储逻辑
• 需提前确认服务端对单个请求体的大小限制，避免过大的base64内容被拦截

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