为什么 formData 不能处理多个文件？

Question

我正在处理的 React 项目遇到问题：我正在尝试将多个图像上传到 Node Express API。我正在使用 formData 对象，并使用

append()

方法从组件状态附加表单字段。

在我使用multer的Express代码中，

req.body

中的所有属性都在那里，但

req.files

为空。

我更改了代码以也使用 formData() 上传单个图像，并且它有效；问题似乎只有当我尝试使用 formData 对象处理多个文件时。我还使用常规形式（不反应）进行了测试，这也有效！

我想知道当我将 formData 与多个文件的文件输入一起使用时是否缺少某些内容？

import React, { Component } from "react";
import axios from "axios";

class Form extends Component {
  constructor() {
    super();
    this.state = { images: {} };
  }

  onChangeImages = e => {
    this.setState({ images: e.target.files })
  };

  onSubmit = e => {
    e.preventDefault();

    const { images } = this.state;

    const formData = new FormData();

    formData.append("images", images);

    axios
      .post("/api/post/create", formData)
      .then(res => console.log(res.data))
      .catch(err => console.error(err));
  };

  render() {
    return (
      <form onSubmit={this.onSubmit}>

        <input
          onChange={this.onChangeImages}
          type="file"
          name="images"
          multiple
          accept="image/png, image/jpeg, image/jpg"
        />

        <br />
        <input type="submit" value="Send" />
      </form>
    );
  }
}

export default Form;

---

快递代码

const express = require('express');
const router = express.Router();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });


router.post('/create', upload.array('images', 2), (req, res) => {
    console.log(req.files);
    console.log(req.body);
    res.status(200).json(req.body);
});


module.exports = router;

Answer 1

formData.append("images", images);

您需要依次附加每个文件。

FormData

不支持

FileList

对象。

for (let i = 0 ; i < images.length ; i++) {
    formData.append("images", images[i]);
}

Answer 2

由于您使用的是“upload.array”，因此在后端您需要这样的东西

   let arrayImages = [];
     for (let i = 0; i < req.files.length; i++) {
       let k = path.join(req.files[i].filename);
       arrayImages.push(k)
   }

    images: arrayImages,