如何将input.files复制的文件数组添加到fetch POST请求的FormData中？

你直接把fauxArray整个append到FormData的做法是错的——FormData会自动把数组转成字符串，所以服务器拿到的是[object File],[object File]这种无效内容。正确的做法是循环文件数组，逐个将File对象添加到FormData，并且要给字段名加上[]后缀，让PHP识别为数组。

修正后的JavaScript代码 #

const formData = new FormData();

// 循环文件数组，逐个添加
fauxArray.forEach(file => {
  formData.append('memoryPhotos[]', file);
});

formData.append('memoryTitle', packageTitle);
formData.append('memoryDescription', packageDescription);

fetch("gui/save.php", {
  method: "post",
  body: formData,
})

PHP端读取方式 #

注意：文件上传的内容不会出现在$_POST里，而是在$_FILES全局变量中。你可以这样处理：

// memoryPhotos是一个数组，包含所有上传的文件信息
$uploadedFiles = $_FILES['memoryPhotos'];

// 遍历处理每个文件
foreach ($uploadedFiles['tmp_name'] as $index => $tmpName) {
    $fileName = $uploadedFiles['name'][$index];
    $fileType = $uploadedFiles['type'][$index];
    $fileError = $uploadedFiles['error'][$index];
    $fileSize = $uploadedFiles['size'][$index];
    
    // 这里可以做文件校验、移动到服务器目录等操作
    if ($fileError === UPLOAD_ERR_OK) {
        move_uploaded_file($tmpName, 'uploads/' . $fileName);
    }
}

// 读取文本字段还是用$_POST
$title = $_POST['memoryTitle'];
$description = $_POST['memoryDescription'];

额外说明 #

你之前的图片预览逻辑是没问题的，只要fauxArray里存储的是原生的File对象，循环添加到FormData就可以正常上传。

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