ReactJS提交含图片的FormData时出现JSON解析错误求助

你遇到的错误核心原因是：后端返回了HTML格式的错误内容（比如PHP报错的<br>标签），但前端代码强制将响应解析为JSON，导致语法解析失败。以下是具体修复方案：

前端代码修复 #

你的代码有两个关键问题：

1. 手动设置Content-Type: multipart/form-data会破坏浏览器自动生成的boundary分隔符，导致后端无法正确解析FormData
2. 未处理HTTP错误状态，后端返回报错时仍强行解析JSON

修复后的代码：

async function handleSubmit(e) {
    e.preventDefault();
    let formdata = new FormData()
    formdata.append('pname', pname)
    formdata.append('pimg', pimg)
    formdata.append('pdesc', pdesc)
    
    try {
        const response = await fetch("http://localhost/ecomapi/addProduct.php", {
            method: 'POST',
            headers: {
                // 移除手动设置的Content-Type，让浏览器自动生成带boundary的正确头
                'Accept': 'application/json'
            },
            body: formdata
        })

        // 先校验HTTP请求是否成功
        if (!response.ok) {
            // 读取后端返回的原始错误内容（可能是HTML）
            const errorContent = await response.text();
            throw new Error(`请求失败: ${response.status} - ${errorContent}`);
        }

        const result = await response.json();
        console.log(result)
    } catch (err) {
        console.error('提交失败:', err);
    }
}

后端（PHP）排查要点 #

1. 开启错误排查：在addProduct.php开头添加代码，查看具体PHP报错：

error_reporting(E_ALL);
ini_set('display_errors', 1);

2. 校验文件上传：确保正确处理文件上传，检查$_FILES['pimg']的状态：

if ($_FILES['pimg']['error'] !== UPLOAD_ERR_OK) {
    // 返回JSON格式的错误，避免前端解析失败
    header('Content-Type: application/json');
    echo json_encode(['success' => false, 'message' => '文件上传失败']);
    exit;
}

3. 强制返回JSON：无论成功还是失败，后端都要返回合法JSON，比如：

// 成功时
header('Content-Type: application/json');
echo json_encode(['success' => true, 'message' => '产品添加成功']);

// 失败时
header('Content-Type: application/json');
echo json_encode(['success' => false, 'message' => '数据库插入失败']);

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