Почему formData не работает с несколькими файлами? - PullRequest
Новая
       34

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

0 голосов
/ 19 января 2019

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

В экспресс-коде, который я использую 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;

1 Ответ

0 голосов
/ 19 января 2019 
formData.append("images", images);

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

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