React Native使用FormData+Fetch上传图片遇属性未定义问题

问题根源解析 #

• 你直接通过data.name这类方式访问FormData的键值对是错误的，FormData的标准API不支持这种属性访问方式，必须使用data.get('key')来获取对应值，或通过entries()方法遍历所有键值对。你看到的undefined不是append操作没生效，而是访问方式不正确。
• 更核心的问题是，React Native中上传文件时，不能直接把uri字符串传给FormData的append方法，需要构造一个包含uri、type、name的完整对象。

修正后的代码实现 #

UploadPhoto = async () => {
  if (this.state.photo != null) {
    const { uri, type, name } = this.state.photo;
    // 处理Android和iOS的uri格式差异，Android的uri需去掉file://前缀
    const fileUri = Platform.OS === 'android' ? uri.replace('file://', '') : uri;

    const data = new FormData();
    data.append('name', 'Image Upload');
    data.append('type', type);
    // 正确构造上传的文件对象
    data.append('file_attachment', {
      uri: fileUri,
      type: type,
      name: name || 'image.jpg' // 兜底文件名，避免部分场景下name为空
    });

    // 正确的FormData调试方式
    console.log("data.get('name'): ", data.get('name'));
    console.log("data.get('type'): ", data.get('type'));
    console.log("FormData所有条目: ", Array.from(data.entries()));

    try {
      const response = await fetch(`${SERVER_URL}/api/upload`, {
        method: 'POST',
        body: data,
        // 不要手动设置Content-Type，fetch会自动添加带boundary的正确头部
        headers: {
          // 'Content-Type': 'multipart/form-data' // 注释掉这行
        }
      });

      const responseData = await response.json();
      console.log('Upload success: ', responseData);
      alert('Upload success!');
      this.setState({ photo: null });
    } catch (error) {
      this.setState({ photo: null, notify: "Pending Upload..." });
      console.log('Upload error: ', error);
      alert('Upload failed!');
    }
  } else {
    alert('Please Select File to Upload...');
  }
};

关键注意事项 #

• FormData访问规范：永远使用get(key)或entries()查看FormData内容，不要直接通过属性访问。
• 文件对象要求：React Native上传文件必须传递包含uri、type、name的对象，而非单纯的uri字符串。
• Content-Type设置：手动设置multipart/form-data会丢失自动生成的boundary，导致服务器无法解析请求，务必删除该header。
• Android uri处理：Android系统返回的文件uri带有file://前缀，必须去掉才能正常上传。
• localhost访问适配：Android模拟器无法直接访问localhost，需替换为10.0.2.2（对应电脑本地回环地址）或你的电脑局域网IP。

调试建议 #

• 使用Array.from(data.entries())打印FormData的所有键值对，确认内容是否符合预期。
• 检查服务器端是否正确配置multipart/form-data解析逻辑，确保接收参数的字段名和你append的名称一致（比如file_attachment）。

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