Как отправить сразу несколько файлов из input file multiple с клиента на сервер?

Question

Собственно, при отправке данных на сервер, вместо массива с файлами отправляется строка вида '[object File],[object File]'. И мне не понятно почему так происходит. Ведь на клиенте через console.log() я отчетливо вижу, что состояние sliderImages содержит в себе массив с файлами. Пробовал в коде для catalogAPI.js писать в headers параметр "content-type": "multipart/form-data", но это не помогло. С другой стороны axios ведь итак по умолчанию отправляет данные таким образом.

файл AddCategory.jsx

import { observer } from 'mobx-react-lite';
import React, { useState } from 'react';
import { createCategory } from '../../../http/catalogAPI';
import cl from '../../../styles/AddItem.module.css';
import InputFiles from '../InputFiles/InputFiles';

const AddCategory = observer(() => {
    const [name, setName] = useState('');
    const [priceValue, setPriceValue] = useState('');
    const [description, setDescription] = useState('');
    const [sliderImages, setSliderImages] = useState(null);

    function create(e) {
        e.preventDefault();
        const formData = new FormData();
        formData.append('name', name);
        formData.append('price', priceValue);
        formData.append('description', description);
        formData.append('sliderImages', sliderImages);
        createCategory(formData);
    }

    return (
        <div className={cl.wrapper}>
            <p className={cl.title}>Добавить категорию</p>
            <form onSubmit={create}>
                <p className={cl.label}>Название</p>
                <input className={cl.input} autoFocus type="text" name="name" placeholder="" value={name} onChange={e => setName(e.target.value)} autoComplete="off" required />
                <p className={cl.label}>Цена (руб.)</p>
                <input className={cl.input} type="number" name="price" value={priceValue} onChange={e => setPriceValue(e.target.value)} required />
                <p className={cl.label}>Описание</p>
                <textarea className={cl.input} type="text" name="description" placeholder="" value={description} onChange={e => setDescription(e.target.value)} />
                <p className={[cl.label, cl.blockName].join(' ')}>Галерия:</p>
                <p className={cl.label}>Изображения для галереи</p>
                <InputFiles nameImg={'sliderImages'} imgs={sliderImages} setImg={setSliderImages}/>
                <div className={cl.formBtns}>
                    <input className={[cl.btn, cl.addBtn].join(' ')} type="submit" value="Добавить" />
                </div>
            </form>
        </div>
    );
});

export default AddCategory;

файл http/catalogAPI.js

import {$authHost, $host} from './index';

export const createCategory = async (category) => {
    const {data} = await $authHost.post('api/category', category);
    return data;
}

export const fetchCategories = async () => {
    const {data} = await $host.get('api/category');
    return data;
}

файл http/index.js

import axios from 'axios'

// для обычных запросов без авторизации
const $host = axios.create({
    baseURL: process.env.REACT_APP_API_URL // url, на который будут отправляться запросы
})

// для запросов при наличии авторизации
const $authHost = axios.create({
    baseURL: process.env.REACT_APP_API_URL
})

// чтобы подставлять автоматически сгенерированный токен к каждому запросу
const authInterceptor = config => {
    config.headers.authorization = `Bearer ${localStorage.getItem('token')}`
    return config
}

// подключаем authInterceptor к $authHost
$authHost.interceptors.request.use(authInterceptor)

export {
    $host,
    $authHost
}

Answer 1

Если имеется массив файлов Array<File>, то добавлять файлы из массива в FormData с помощью метода append нужно по отдельности, в цикле.

// ...
const [sliderImages, setSliderImages] = useState(null);

function create(e) {
  e.preventDefault();
  const formData = new FormData();
  formData.append('name', name);
  formData.append('price', priceValue);
  formData.append('description', description);

  for(let file of sliderImages) {
    formData.append('sliderImage', file);
  }
  
createCategory(formData);
}
// ...

БЛОГ НА HUSL

Как отправить сразу несколько файлов из input file multiple с клиента на сервер?

Ответы (1 шт):