React Native中POST请求被转为GET请求的问题排查

核心错误点 #

• fetch配置错误：method: "POST"被错误嵌套在headers对象内，导致fetch默认使用GET请求，而GET请求不允许携带body，触发TypeError: Body not allowed for GET or HEAD requests。
• FormData构造错误：
  • 错误遍历files.length，实际expo-image-picker多选返回的图片列表存储在files.assets数组中。
  • 直接传入uri到FormData，未按React Native要求构造符合multipart格式的文件对象。
• body传递错误：将filelist包裹在普通对象中传递，而非直接传入FormData实例。
• 不必要的Content-Type设置：手动设置"Content-type": "multipart/form-data"会丢失自动生成的boundary参数，导致服务器无法解析表单数据。
• 授权头格式错误：原代码中Bearer: ${user.token}多了冒号，正确格式应为Bearer ${token}，可能导致授权验证失败。

修正后的代码 #

const uploadPhoto = async () => {
  try {
    // 检查权限
    const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!permissionResult.granted) {
      console.log("需授予媒体库权限才能上传图片");
      return;
    }

    // 调用图片选择器
    const pickerResult = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      quality: 1,
      allowsMultipleSelection: true,
    });

    if (!pickerResult.canceled) {
      const formData = new FormData();
      // 遍历选中的assets数组
      pickerResult.assets.forEach((asset, index) => {
        // 构造符合multipart要求的文件对象
        formData.append("photos", {
          uri: asset.uri,
          name: `upload_photo_${index}.jpg`,
          type: asset.mimeType || "image/jpeg",
        });
      });

      // 修正fetch配置结构
      const response = await fetch(`${API}/ad/upload`, {
        method: "POST", // 正确放置请求方法
        headers: {
          Authorization: `Bearer ${user.token}`, // 修正授权头格式
        },
        body: formData, // 直接传入FormData实例
      });

      const responseData = await response.json();
      console.log("上传成功:", responseData);
    }
  } catch (err) {
    console.log("上传失败:", err);
  }
};

axios请求补充方案 #

若使用axios仍出现Network error，需确保配置与fetch修正逻辑一致，示例如下：

const uploadWithAxios = async () => {
  // 省略权限检查和图片选择逻辑（同上方代码）
  if (!pickerResult.canceled) {
    const formData = new FormData();
    pickerResult.assets.forEach((asset, index) => {
      formData.append("photos", {
        uri: asset.uri,
        name: `upload_photo_${index}.jpg`,
        type: asset.mimeType || "image/jpeg",
      });
    });

    try {
      const response = await axios.post(`${API}/ad/upload`, formData, {
        headers: {
          Authorization: `Bearer ${user.token}`,
          // 不要手动设置Content-Type，axios会自动生成带boundary的正确头
        },
      });
      console.log("axios上传成功:", response.data);
    } catch (err) {
      console.log("axios上传失败:", err);
    }
  }
};

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