Загрузить несколько файлов / изображений, получить, formData

Question

Я хочу загружать изображения через fetch(). Я использовал formData, и мне удалось загрузить, но только одно изображение за раз.

handleGetNewPictureDragDrop = data => {

        console.log(data);

        const formData = new FormData();

        for (let i = 0; i < data.length; i++) {
            formData.append('filename', data[i]);
        }

        console.log(...formData);

        const name = this.props.nameCategory;

        fetch('http://api.../gallery/' + name, {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(success => console.log(success))
            .catch(error => console.log(error));
    }

console.log (data):

console.log (... formData):

console.log (успех):

Я беру 3 изображения, создаю formData, есть 3 изображения, но после отправки этого formData я загружаю только одно.

Answer 1

Я думаю, вы передаете одно и то же «имя» для добавления к каждому изображению. синтаксис должен быть

formData.append(name, value, filename);

, и первым из них должно быть имя поля, и если оно не уникальное, оно перезаписывается.

попробуйте сделать его динамическим c

  for (let i = 0; i < data.length; i++) {
        formData.append(`filename_${i}`, data[i]);
    }

или, возможно, что-то другое (уникальное из ваших данных) было бы лучше, просто не передавайте одно и то же имя для каждого изображения.

Answer 2

Используйте уникальный ключ при добавлении нескольких файлов в данные.

formData.append('file'+i, data[i]);