Postman正常的ASP REST POST接口在React Native中返回400错误

问题描述 #

基于ASP的REST API POST接口在Postman中调用正常，但使用React Native的axios调用时返回400错误，调用代码如下：

const formData = new FormData();
formData.append("file", {
  uri: imageUri,
  name: stdAdmNo.replaceAll("/", ""),
  fileName: stdAdmNo.replaceAll("/", ""),
  type: "image/jpg",
});
console.log("image detail", formData);
let url = url;
try {
  axios({
    method: "post",
    url: url,
    data: formData,
    headers: {
      "Content-Type": "multipart/form-data",
    },
  })
    .then(() => {
      Alert.alert("Profile picture is successfully saved.");
    })
    .catch((error) => {
      console.log(error);
    });
} catch (e) {
  console.log(e);
}

可能的原因及修复方案 #

1. 手动设置Content-Type导致格式错误

axios处理FormData时会自动生成带boundary的正确multipart/form-data请求头，手动设置该字段会丢失boundary，导致ASP后端无法解析表单数据，返回400错误。

修复： 删除手动配置的Content-Type头

axios({
  method: "post",
  url: "你的实际接口URL", // 替换为真实接口地址
  data: formData,
  // 移除headers中的Content-Type配置
})

2. FormData文件属性名不规范

React Native的FormData中，文件名标准字段是filename，而非代码里的fileName，ASP后端可能期望接收filename字段，导致无法识别上传的文件。

修复： 将fileName改为filename

formData.append("file", {
  uri: imageUri,
  name: stdAdmNo.replaceAll("/", ""),
  filename: stdAdmNo.replaceAll("/", ""), // 修正属性名
  type: "image/jpg",
});

3. 图片URI格式适配问题

React Native不同平台的图片URI格式存在差异：

• iOS通常为file://开头
• Android可能是content://或本地文件路径

格式不正确会导致文件无法正常上传，可针对平台做适配处理。

示例适配：

let adjustedUri = imageUri;
// 处理Android平台的URI格式
if (Platform.OS === 'android' && imageUri.startsWith('file://')) {
  adjustedUri = imageUri.slice(7);
}

formData.append("file", {
  uri: adjustedUri,
  name: stdAdmNo.replaceAll("/", ""),
  filename: stdAdmNo.replaceAll("/", ""),
  type: "image/jpg",
});

4. 无效的URL变量赋值

代码中let url = url;属于无效赋值，会导致请求地址为undefined，需替换为真实的接口URL。

修复：

const apiUrl = "https://你的接口域名/上传接口路径"; // 替换为真实地址
axios({
  method: "post",
  url: apiUrl,
  data: formData,
})

完整修复后的代码示例 #

import axios from 'axios';
import { Alert, Platform } from 'react-native';

const uploadProfilePicture = async (imageUri, stdAdmNo) => {
  const formData = new FormData();
  
  // 适配不同平台的URI格式
  let adjustedUri = imageUri;
  if (Platform.OS === 'android' && imageUri.startsWith('file://')) {
    adjustedUri = imageUri.slice(7);
  }

  formData.append("file", {
    uri: adjustedUri,
    name: stdAdmNo.replaceAll("/", ""),
    filename: stdAdmNo.replaceAll("/", ""),
    type: "image/jpg",
  });

  try {
    await axios({
      method: "post",
      url: "https://你的真实接口地址",
      data: formData,
    });
    Alert.alert("Profile picture is successfully saved.");
  } catch (error) {
    console.error("上传失败:", error.response?.data || error.message);
  }
};

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