Загрузка нескольких файлов на сервер?

Question

[aznhautroalvyl]

Задача: загрузить несколько файлов на сервер (бэкенд на Node.js)

Добавил форму для загрузки файлов и обработчик для неё:

class InputFile extends Component {
  constructor(props) {
    super(props);
    this.state = {     
      selectedFile: null,
      // selectedFile: [],
      filesList: []     
    };
  }

  uploadChosenFile(selectedFile, fileName) {
    this.setState({
      selectedFile,
      filesList: fileName
    });
  }

  handleUploadFile(event) {
    const list = this.state.filesList;

    list.push(event.target.files[0].name);
    this.uploadChosenFile(event.target.files, list);
  }

  render() {
    return (
      <div>
        <input id='file' name='file'
          type='file' formEncType='multipart/form-data' onChange={this.handleUploadFile}
          multiple
        />
        <div>
          {this.state.filesList.map(item => {
            return (<a className='edit__form-group-link' href='#' key={'1'}>{item}</a>);
          })}
        </div>
      </div>
    );
  }
}

После нажатия на кнопку отправки, из этого же компонента вызывается функция:

uploadFilesToServer(idEvent) {
    const data = new FormData();

    this.state.selectedFile.map(el => {
      data.append('file', el, el.name);
      axios.post(`${Config.baseUrl}/upload/${idEvent}`, data);
    });
  }

В результате на сервер отправлялся только последний файл из всех выбранных.
Попытался сделать из this.state.selectedFile массив и передавать по одному файлу и него, но получал ошибку 500 в консоли. Подскажите, пожалуйста, где ошибка?

Answer 1

[Сергей Глейп]

Вот эту строчку
data.append('file', el, el.name);
Надо заменить на
data.append('file[]', el, el.name);