React Native中Axios Create结合Multipart与FormData上传的正确用法

问题根源分析 #

你的代码存在几个核心问题：

1. Axios实例配置错误：axios.create时传入data不符合设计逻辑，实例应只做通用配置，请求数据需在调用post时传入；且每次请求都创建新实例，冗余且易引发问题。
2. FormData构造错误：直接把整个param对象作为data字段append，后端无法正确解析；React Native中上传文件需要按特定格式添加到FormData。
3. Content-Type手动设置错误：手动指定multipart/form-data会丢失Axios自动生成的boundary分隔符，导致后端无法解析请求体。

正确代码实现 #

1. ApiConfigAxios.js（配置层） #

创建通用的multipart请求Axios实例，仅做基础配置，不绑定请求数据：

import axios from 'axios';

// 假设website和base64data是已定义的全局变量
export const multiPartAxiosInstance = axios.create({
    baseURL: website,
    withCredentials: true,
    headers: {
        "Accept": "application/json",
        "Authorization": `Basic ${base64data}`
        // 不要手动设置Content-Type，Axios会自动处理multipart的boundary
    }
});

2. ApiAxios.js（请求逻辑层） #

负责参数转换、FormData构建和请求发送：

import { multiPartAxiosInstance } from './ApiConfigAxios';

export const ApiUpload = async (param) => {
    const formData = new FormData();
    
    // 正确添加文件字段：React Native中需要指定uri、type、name
    formData.append('file', {
        uri: param.file,
        type: param.mimeType,
        name: param.name
    });
    
    // 添加其他文本字段
    formData.append('title', param.title);
    
    // 保留业务逻辑中的case判断（注意需确保传入的param包含case字段）
    if (param.case === 1) {
        const response = await multiPartAxiosInstance.post('/ApiUpload', formData);
        return response.data;
    }
};

额外注意事项 #

• React Native文件URI格式：确保param.file的URI格式正确，比如iOS的file://开头、Android的content://或file://格式，同时需确保相机/相册权限已正常申请。
• 后端字段匹配：后端需对应解析FormData的字段名（示例中的file和title），若后端期望字段名不同，需调整formData.append的第一个参数。
• 错误排查：若仍报错，可在请求前打印formData，或通过Axios的interceptors打印完整请求信息，确认请求体格式是否符合后端要求。

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