React中如何将多文件正确追加到FormData中？

核心问题 #

• 图片选择逻辑错误：imageHandler仅获取了选中文件列表的第一个文件(e.target.files[0])，完全忽略了多选的其他文件。
• FormData处理错误：直接将数组传入formData.append()，FormData无法识别数组类型，会将其转为字符串或仅保留单个元素，无法生成后端可识别的多文件结构。

修复步骤 #

1. 修正图片选择逻辑 #

修改imageHandler，遍历用户选中的所有文件，合并到状态数组中：

const imageHandler = (e) => {
  // 将FileList转为数组，合并到现有images状态
  const newImages = Array.from(e.target.files);
  setImages(prev => [...prev, ...newImages]);
};

2. 正确构建FormData #

不要直接append数组，循环images数组逐个添加File对象，保持相同的name属性（后端以此识别为文件数组）：

const sendDisease = async (e) => {
  e.preventDefault();
  const form = document.getElementById("signUpForm");
  const formData = new FormData(form);
  
  // 移除FormData中自动添加的gallery字段（原input的文件已存在于images状态）
  formData.delete("gallery");
  // 逐个添加所有图片
  images.forEach(file => {
    formData.append("gallery", file);
  });

  try {
    const api = "https://localhost/api/v1/website/disease/add";
    const { data } = await axios.post(api, formData, {
      headers: {
        Authorization: `Bearer ${token}`,
        // 无需手动设置Content-Type，axios会自动生成带边界值的正确头
      },
    });
    toast.success(data.message, { autoClose: 15000 });
  } catch (e) {
    console.log(e);
    toast.error(e.response?.data?.error || "上传失败", { autoClose: 15000 });
    console.log(e.response?.data?.error);
  }
};

3. 额外优化 #

• 移除axios请求中嵌套的headers层级：原代码两层headers导致配置无效，且FormData的Content-Type无需手动指定。
• 错误处理添加可选链，避免响应不存在时的报错。

关键修正后的完整代码片段 #

const [selectedFile, setSelectedFile] = useState();
const [images, setImages] = useState([]);

const token = localStorage.getItem("TOKEN");

const imageHandler = (e) => {
  const newImages = Array.from(e.target.files);
  setImages(prev => [...prev, ...newImages]);
};

useEffect(() => {
  if (images.length) console.log(images);
}, [images]);

const sendDisease = async (e) => {
  e.preventDefault();
  const form = document.getElementById("signUpForm");
  const formData = new FormData(form);
  
  formData.delete("gallery");
  images.forEach(file => {
    formData.append("gallery", file);
  });

  try {
    const api = "https://localhost/api/v1/website/disease/add";
    const { data } = await axios.post(api, formData, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
    toast.success(data.message, { autoClose: 15000 });
  } catch (e) {
    console.log(e);
    toast.error(e.response?.data?.error || "上传失败", { autoClose: 15000 });
    console.log(e.response?.data?.error);
  }
};

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