ReactNative使用Axios上传图片到服务器失败，服务端接收文件为空如何解决

问题根因 #

• 字段判断条件不匹配：你的代码中通过data[prop]?.mime判断是否为文件对象，但实际打印的图片对象里MIME类型对应的字段是type，不存在mime属性，因此文件处理分支没有触发，整个对象被当做普通字段提交，服务端无法识别为文件。
• 缺少Multipart请求头配置：Axios在React Native环境下不会自动为FormData请求设置Content-Type: multipart/form-data请求头，服务端无法正确解析请求体格式。
• iOS本地路径协议缺失：iOS模拟器返回的本地文件路径没有file://协议前缀，部分版本的React Native FormData无法识别这类路径，导致文件读取失败。

修复代码 #

首先确保文件头部导入RN的平台判断模块：

import { Platform } from 'react-native';

修改后的完整请求方法：

const makeMultipartFormDataRequest = async ({
    path,
    data = null,
    headers = null
}) => {
    let accessToken = await getAccessToken();
    // 初始化headers，固定添加multipart请求头
    headers = headers || {};
    headers['Content-Type'] = 'multipart/form-data';
    if (accessToken) {
        headers.Authorization = `Bearer ${accessToken}`;
    }
    let formData = new FormData();
    if (data) {
        for (let prop in data) {
            let field = null;
            // 判断条件改为匹配实际存在的type字段
            if (typeof data[prop] == "object" && data[prop]?.type) {
                // 给iOS路径补充file://协议前缀
                const fileUri = Platform.OS === 'ios' && !data[prop].uri.startsWith('file://') 
                    ? `file://${data[prop].uri}` 
                    : data[prop].uri;
                field = {
                    uri: fileUri,
                    name: data[prop].name,
                    type: data[prop].type
                }
            } else {
                field = data[prop];
            }
            formData.append(prop, field);
        }
    }
    let url = config.apiEndpoint + path;

    return axios.post(url, formData, {
        headers: headers,
        // 禁止Axios自动序列化请求体，保留FormData原始格式
        transformRequest: (data) => data
    });
}

内容的提问来源于stack exchange，提问作者Wai Yan Hein