React Native FormData上传图片异常：服务器未接收图片且报格式错误

我需要将本地设备中的图片上传至服务器，使用react-native-image-picker的launchImageLibrary选择了名为photo的资源，尝试将其转为Blob后添加到FormData中，代码如下：

const resp = await fetch(photo.uri);
const blob = resp.blob();
formData.append('regPhoto', blob);
registerUser(formData);

已确认await fetch返回状态码200且数据有效，随后通过XMLHttpRequest API发送FormData：

function registerUser(formData: FormData) {
  cl("registerUser");
  return new Promise((resolve) => {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", url + "registerUser");
    xhr.onreadystatechange = () => {
      const resObj = onReadyStateChange(xhr);
      if (resObj) {
        resolve(resObj);
      }
    };

    xhr.send(formData);
  });
}

目前遇到两个问题：

• 服务器接收的请求不含图片，但仍继续处理流程
• 安卓模拟器客户端收到JSON响应提示「Unrecognized formdata part」，无法定位错误来源

试过其他将图片添加到FormData的方法，均出现相同错误，寻求解决思路。

1. 修复Blob获取的异步问题 #

resp.blob()是异步方法，你未添加await，导致blob实际是Promise对象而非Blob实例，FormData无法识别该类型。修改代码：

const resp = await fetch(photo.uri);
const blob = await resp.blob(); // 补充await
formData.append('regPhoto', blob);
registerUser(formData);

2. 给FormData的Blob字段指定文件名与MIME类型 #

React Native环境下，FormData处理Blob时需明确指定文件名和文件类型，否则服务器可能无法识别表单字段。可从photo对象提取相关信息：

const resp = await fetch(photo.uri);
const blob = await resp.blob();
// 利用react-native-image-picker返回的photo对象自带的fileName和type字段
formData.append('regPhoto', blob, photo.fileName || 'upload.jpg');
// 若需更精确配置，可使用对象参数：
// formData.append('regPhoto', blob, { filename: photo.fileName, type: photo.type });
registerUser(formData);

3. 排查XMLHttpRequest请求细节 #

虽然XMLHttpRequest发送FormData时会自动设置Content-Type: multipart/form-data并携带boundary，但可添加调试逻辑确认上传状态：

function registerUser(formData: FormData) {
  cl("registerUser");
  return new Promise((resolve) => {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", url + "registerUser");
    // 无需手动设置Content-Type，XMLHttpRequest会自动处理boundary
    xhr.onreadystatechange = () => {
      const resObj = onReadyStateChange(xhr);
      if (resObj) {
        resolve(resObj);
      }
    };
    // 添加上传进度监听，方便确认是否有数据传输
    xhr.upload.onprogress = (event) => {
      if (event.lengthComputable) {
        cl(`上传进度：${(event.loaded / event.total) * 100}%`);
      }
    };
    xhr.send(formData);
  });
}

4. 服务器端配置排查 #

「Unrecognized formdata part」错误大概率来自服务器端，建议：

• 确认服务器接收的字段名与FormData中的regPhoto完全一致
• 用抓包工具（如Charles、Fiddler）查看实际请求体，确认FormData是否包含图片字段
• 检查服务器端的Multipart解析配置，是否支持当前的FormData格式

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