React Native用fetch+FormData上传Image Picker图片后端收[Object Object]如何解决

标准的 FormData.append() 方法仅支持传入字符串、Blob、File类型作为第二个参数，你直接传入自定义的{filename, uri, type}对象时，运行环境会自动调用对象的toString()方法，最终序列化的结果就是[Object Object]字符串，这就是后端只能拿到字符串、识别不到文件的核心原因。
另外你代码中存在适配错误：React Native 环境下 FormData 识别的本地文件对象属性名为name，而非你写的filename。

1 React Native 端（安卓/iOS 环境） #

RN 框架内置的 fetch 对本地文件上传做了专属适配，修正两处配置即可：

• 把自定义对象的filename属性改为name
• 不要手动添加Content-Type: multipart/form-data请求头，fetch 会自动生成带边界标识（boundary）的正确请求头
  修正后代码：

const data = new FormData();
// 安卓端uri为file://开头格式直接传入即可，不需要额外处理
data.append('pic', { 
  name: 'dd.jpeg', // 此处把filename改为name
  uri: file.uri, 
  type: 'image/jpeg'
});
let res = await fetch(
  'http://192.168.0.88:8000/api/review/new',
  {
    method: 'POST',
    body: data,
    // 不要手动配置headers中的Content-Type字段
  }
);
let responseJson = await res.json();

2 Web 端环境 #

Web端 Image Picker 返回的是 base64 格式，需要先把 base64 转成 Blob 对象再传入 FormData：

const data = new FormData();
// base64转Blob工具函数
const base64ToBlob = (base64, type = 'image/jpeg') => {
  const byteCharacters = atob(base64.split(',')[1]);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    const slice = byteCharacters.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  return new Blob(byteArrays, {type});
}
const picBlob = base64ToBlob(file.uri);
data.append('pic', picBlob, 'dd.jpeg');
let res = await fetch(
  'http://192.168.0.88:8000/api/review/new',
  {
    method: 'POST',
    body: data,
  }
);
let responseJson = await res.json();

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