Почему formData не работает с несколькими файлами?

У меня проблема с проектом React, над которым я работаю: я пытаюсь загрузить несколько изображений в API Node Express. Я использую объект formData и метод append() для добавления полей формы из компонента State.

В коде Express я использую multer, все атрибуты в 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;

person Felix Avelar    schedule 19.01.2019    source источник


Ответы (1)


formData.append("images", images);

Вам нужно добавлять каждый файл по очереди. FormData не поддерживает объект FileList.

for (let i = 0 ; i < images.length ; i++) {
    formData.append("images", images[i]);
}
person Quentin    schedule 19.01.2019
comment
Спасибо! Сэкономлено много времени. (у) - person Hiran D.A Walawage; 22.06.2020
comment
Об этом нужно говорить везде! - person Sanal S; 21.07.2020
comment
Об этом действительно стоит упоминать везде. - person Durodola Opemipo; 19.12.2020
comment
Создает еще одно поле с ключевыми изображениями. Я запутался. - person iClass Chima; 27.05.2021