React Native客户端无法向MongoDB传图，Postman可正常上传

问题描述 #

通过Postman可正常将图片存入MongoDB，但React Native客户端上传后，MongoDB中img.data为空的BinData，怀疑FormData配置有误。

客户端代码问题分析 #

当前上传代码的FormData构造存在两处关键错误：

• FormData文件字段格式错误：React Native中上传文件时，FormData需直接传递包含uri、type、name的对象，而非嵌套的img子对象，当前写法会导致服务端无法正确解析文件内容。
• 文件类型判断逻辑无效：'image/jpg' || 'image/jpeg' || 'image/png' || 'image/gif'的写法结果永远是'image/jpg'，无法根据实际文件类型动态匹配，也未关联文件真实类型。

修正后的上传代码 #

const uploadImage = async (selectedImageUri) => {
    if(!selectedImageUri){
        console.error("Kein Bild zum Hochladen ausgewählt.");
        return;
    }

    // 提取文件名和文件类型
    const fileName = extractFileName(selectedImageUri);
    // 从URI推断文件类型，或根据实际选择的文件类型传入
    const fileType = selectedImageUri.endsWith('.png') ? 'image/png' : 
                     selectedImageUri.endsWith('.gif') ? 'image/gif' : 'image/jpeg';

    const formData = new FormData();
    // 正确的FormData文件字段格式
    formData.append('image', {
        uri: selectedImageUri,
        name: fileName,
        type: fileType,
    });

    try {
        const response = await axios.post('https://4c5b-77-0-73-93.ngrok-free.app/uploadImage', formData, {
            headers: {
                // 无需手动设置Content-Type，axios会自动生成带boundary的multipart/form-data
            },
        });

        console.log("Bild wurde erfolgreich hochgeladen", response.data);
        alert('Bild wurde erfolgreich hochgeladen.');

    } catch (error) {
        console.error("Fehler beim Hochladen des Bildes: ", error);
        alert("Fehler beim Hochladen des Bildes.");
    }
};

额外说明 #

• 不要手动设置Content-Type: multipart/form-data，axios会自动处理并添加正确的boundary参数，手动设置反而可能导致解析失败。
• 如果服务端期望对应MongoDB的img嵌套结构，可调整服务端解析逻辑，或在FormData中分别传递name、img.data、img.contentType字段，但更推荐直接上传文件流，由服务端转换为BinData存储。

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