如何正确格式化FormData结构以匹配后端要求完成图片POST请求？

看起来你的请求有几个关键问题导致后端解析失败，咱们一步步来修正：

核心问题分析 #

1. Header拼写错误：你写的是header，但fetch的配置项应该是headers（复数）——这个小失误会导致你的认证头和Accept头根本没被发送，后端可能因为拿不到用户信息而找不到关联对象，触发nil:NilClass的错误。
2. 错误的Content-Type设置：发送FormData时，绝对不能手动设置Content-Type: application/json！fetch会自动根据FormData生成正确的multipart/form-data头（包含必要的boundary分隔符），手动设置json类型会让后端完全无法解析表单数据，这大概率是核心问题。
3. React Native图片格式细节：确保你的localUri在iOS上是file://开头的格式，Android上可能是content uri；同时type要设置正确的MIME类型（比如image/jpeg或image/png），避免后端无法识别图片类型。

修正后的代码 #

async function uploadVision() {
  let formData = new FormData();
  // 注意：type要根据实际图片类型设置正确的MIME值
  formData.append('image', { 
    uri: localUri, 
    name: filename, 
    type: 'image/jpeg' 
  });
  formData.append('description', 'this is the description');

  try {
    const response = await fetch('https://prana-app.herokuapp.com/v1/visions/', {
      method: 'POST',
      body: formData,
      headers: { // 这里改成复数headers
        'Accept': 'application/json',
        // 删掉手动设置的Content-Type，让fetch自动处理
        'X-User-Email': this.state.email,
        'X-User-Token': this.state.accessToken
      },
    });
    const result = await response.json();
    console.log('上传成功:', result);
    return result;
  } catch (error) {
    console.error('上传失败:', error);
    throw error;
  }
}

额外说明 #

后端的NoMethodError (undefined method 'build' for nil:NilClass)通常意味着：后端尝试调用某个对象的build方法，但这个对象是nil。结合你的代码来看，最可能的原因是后端期望通过X-User-Email和X-User-Token获取当前用户，但因为header拼写错误导致这些头没传过去，后端找不到用户，所以关联的visions对象是nil，调用build时出错。修正headers拼写和Content-Type后，这个问题应该就能解决。

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