Form Data上传图片报错：Undefined array key 'photo' 求助

出现这个错误的核心原因有三个，逐个修复就能解决：

1. FormData未添加合法的File对象 #

你直接给FormData append了一个自定义对象，浏览器无法将其识别为文件，服务器自然接收不到photo字段。浏览器环境下必须通过用户选择的File对象（或Blob）来构建表单文件字段。

2. 手动设置Content-Type: multipart/form-data会破坏表单解析 #

当用fetch提交FormData时，浏览器会自动生成包含boundary的Content-Type头（比如multipart/form-data; boundary=----WebKitFormBoundaryxxxx），手动设置会丢失这个关键的boundary，导致服务器无法正确解析表单数据。

3. 浏览器无法直接读取本地文件路径 #

出于安全限制，浏览器不能直接通过C:\Users\mea\Downloads\testimg.jpeg这种本地路径读取文件，必须通过文件选择器让用户主动选择文件。

修改后的完整代码： #

index.html

<html>
<head>
 <script type="text/javascript" src="index.js"></script>
</head>
<body>
  <!-- 添加文件选择控件 -->
  <input type="file" id="imageInput" accept="image/*" />
  <button onclick="uploadImage()">Upload an Image</button>
</body>
</html>

index.js

async function uploadImage(){
    // 获取用户选择的文件
    const fileInput = document.getElementById('imageInput');
    const file = fileInput.files[0];
    if (!file) {
        alert('请先选择图片');
        return;
    }

    const data = new FormData();
    // 直接append选中的File对象
    data.append('photo', file);

    return await fetch('upload_image.php', {
        method: 'POST',
        body: data
        // 不要手动设置Content-Type，浏览器会自动处理
    });
}

upload_image.php

<?php
header('Access-Control-Allow-Origin: *');
// 先检查photo字段是否存在，避免报错
if (!isset($_FILES['photo'])) {
    echo json_encode(array('message' => '未接收到上传文件'));
    exit;
}

$target_dir = "../../images";
// 确保目标目录存在，否则创建
if (!is_dir($target_dir)) {
    mkdir($target_dir, 0755, true);
}

$target_file = $target_dir . '/' . basename($_FILES['photo']['name']);

if(move_uploaded_file($_FILES['photo']['tmp_name'], $target_file)) {
    echo json_encode(array('message' => 'Image uploaded Successfully'));
} else {
    echo json_encode(array('message' => 'Upload failed!'));
}
?>

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