React中使用Redux Toolkit上传多张图片遇到的问题

问题出在你直接把整个FileList对象append到FormData里了——e.target.files是一个类数组的FileList对象，不是普通数组，直接append会被转成字符串[object FileList]，服务器根本解析不到实际的文件内容。

正确的做法：遍历FileList逐个添加文件 #

你需要把FileList里的每个文件单独append到FormData中，根据后端的接收规则选择对应的key：

const handleFileChange = (e) => {
  const images = e.target.files;
  const formData = new FormData();

  if (images) {
    // 把FileList转成数组后遍历
    Array.from(images).forEach(file => {
      // 两种key写法二选一，取决于后端配置：
      // 1. 后端接收数组形式（比如PHP的$_FILES['image']），用带[]的key
      formData.append('image[]', file);
      // 2. 后端支持重复同名key，直接用'image'
      // formData.append('image', file);
    });
    dispatch(uploadProductImage(formData));
  }
};

为什么之前的尝试无效？ #

• 直接传入images：你把整个FileList传给FormData，本质是传递了一个对象，不是文件流
• 展开images成数组后append：formData.append('image', [...images])是把数组作为值传递，FormData会把数组转成字符串，同样不是文件内容

额外检查点 #

1. 确认后端接口的接收字段名和格式，比如是否要求用image[]作为数组字段名
2. 检查uploadProductImageThunk里的请求配置：如果用axios发送请求，不需要手动设置Content-Type: multipart/form-data，axios会自动识别FormData并设置正确的请求头；如果用fetch，也要确保不手动设置Content-Type，让浏览器自动处理

内容的提问来源于stack exchange，提问作者tea-codes