React Native调用Trello API上传卡片附件文件名缺失扩展名问题

你当前的代码存在两个问题，导致Trello无法识别正确的文件名与扩展名：

• 向FormData的file字段直接传入裸base64字符串时，没有携带文件本身的名称、类型元数据，Trello解析不到文件元信息时，会默认将fileName赋值为固定值"Upload"，不会自动匹配扩展名。
• 手动传入的name参数值为test，本身没有携带图片后缀，且手动硬编码Content-Type: multipart/form-data请求头时，没有自动拼接表单边界（boundary）参数，会进一步干扰服务端对表单内文件元数据的解析。

按照React Native环境下FormData传文件的规范调整代码即可，具体修改点：

• 构造file字段时不要直接传裸base64，改为传入带uri、type、name属性的文件对象，base64数据需要拼接data:[mimeType];base64,前缀作为uri值，文件对象的name属性直接带上对应图片扩展名。
• 外层传入的name字段同步加上对应扩展名，兼容Trello API的字段读取逻辑。
• 移除手动设置的Content-Type请求头，让React Native网络层自动生成带正确boundary参数的multipart/form-data头，避免元数据解析失败。

修正后的可运行代码：

const formData = new FormData();
// 按RN文件规范构造上传的图片对象，此处以jpeg格式为例
formData.append("file", {
  uri: `data:image/jpeg;base64,${base64}`,
  type: "image/jpeg",
  name: "test.jpg" // 文件名直接携带.jpg扩展名
});
formData.append("name", "test.jpg");

axios.post(url, formData, {
  headers: {
    Accept: "application/json"
  }
}).then((res) => {
  if (res?.data) {
    console.log(res.data);
  }
}).catch((error) => {
  logError(error);
});

• 如果使用react-native-image-picker拍摄/选择的是png格式图片，同步将type改为image/png、文件名后缀改为.png即可，和实际图片格式保持一致。
• 代码调整后重新上传，接口返回的fileName字段会正确显示为带后缀的文件名，Trello端可正常生成图片预览，文件下载到本地后操作系统也能直接识别为图片文件。
• 之前已经上传的无扩展名附件，不需要重新传文件，调用Trello的附件更新接口将附件name字段修改为带正确扩展名的值即可完成修复。

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