React Native使用react-native-image-picker+fetch上传图片至服务器失败

你代码里有两个关键错误导致服务器无法正确接收图片：

1. 错误将图片对象转为JSON字符串：FormData需要直接传入符合文件格式的对象，而非JSON字符串，服务器无法解析JSON字符串为文件。
2. 手动设置Content-Type: multipart/form-data：fetch会自动生成包含boundary的正确请求头，手动设置会丢失这个边界标识，导致服务器无法正确解析表单数据。

修正后的代码 #

<CircleAvatar
  onPress={async () => {
    const {assets} = await launchImageLibrary({
      selectionLimit: 1,
      mediaType: 'photo',
    });

    if (assets && assets[0]) {
      const formData = new FormData();
      // 直接传入文件对象，不要JSON.stringify
      formData.append('image', {
        uri: assets[0].uri,
        type: assets[0].type || 'image/jpeg', // 兜底图片类型，避免type为空
        name: assets[0].fileName || 'myImage.jpg', // 优先使用图片原文件名
      });

      fetch('http://localhost:3000/api/v1/users/me', {
        method: 'PATCH',
        body: formData,
        headers: {
          Accept: 'application/json',
          'cache-control': 'no-cache',
          // 移除手动设置的Content-Type，fetch会自动处理
        },
      })
        .then(response => response.json())
        .then(data => {
          console.log('Upload successful:', data);
          // 处理成功响应
        })
        .catch(error => {
          console.error('Upload failed:', error);
          // 处理错误
        });
    }
  }}
  imageUrl={values.image}
/>

额外注意事项 #

• 若在Android模拟器测试，localhost需替换为10.0.2.2（Android模拟器默认映射本地电脑的IP）。
• 确保assets[0].type是有效的MIME类型，若返回type为空，手动指定image/jpeg或image/png即可。

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