Почему не загружаются файлы на и сервер возвращает пустой объект?

Question

[1programmer]

Есть фронт, на котором пытаюсь сделать загрузку картинок, типа хостинга картинок, ничего сложного, на кнопку загрузки код :

const handleUploadPhoto = async e => {
        e.preventDefault();
        
        const formData = new FormData();

        fileList.forEach(file => {
            formData.append("files", file, file.name);
        });

        const { data } = await axios.post("/api/upload", formData, {
            headers: {
                "Content-Type": "multipart/form-data"
            }
        });

        console.log(data);
    };

fileList массив объектов e.dataTransfer.files.
На беке:

public function upload(Request $request)
    {
        return response()->json($request);
    }

Почему мне вовзращается {files:{}} если загружаю картинку, если загружаю что то типа
formData.append('test':'test'); все отрабатывает.... Где ошибся, подскажите пожалуйста, уже вроде и туторы посмотрел, везде одинаковый код, как и у меня.

Comments

[Xcho Margaryan]

formData.append("files[]", file, file.name);
если несколько файлов то нужно в массив их

[1programmer]

Xachik, пробовал, тот же самый ответ, так же делал formData.append("files", fileList[0]);

[Xcho Margaryan]

а где у тебя FileList?

[Xcho Margaryan]

ты проверь свою FormData-у, добавляются ли файлы или нет,

const formData = new FormData();

        fileList.forEach(file => {
            formData.append("files", file, file.name);
        });
console.log(formData)

[1programmer]

Xachik, пусто там, но если пишу: formData.append("test", "test");
там тоже пусто, но с бека возвращается {test:test}

[Xcho Margaryan]

а fileList у тебя полный? с файлами?
по-моему и файл лист пуст у тебя.

const handleUploadPhoto = async e => {
        e.preventDefault();
        
        const formData = new FormData();

        
let files = e.dataTransfer.files

        if (!files.length) {
          return false
        }
        forEach(files, (value, index) => {
          formData.append('files[]',value)
        }

        const { data } = await axios.post("/api/upload", formData, {
            headers: {
                "Content-Type": "multipart/form-data"
            }
        })
.then(response => {
           console.log(data);
          });

        
    };

[Xcho Margaryan]

только сделай 2 функции,одним добавь файлы в формдату,когда выбираешь картинки а через другой при нажатии Добавить отправть на сервер

[1programmer]

Xachik, полный он у меня, я выводил и в цикле и за циклом данные из него, все там правильно лежит

Answer 1

[1programmer]

Отправляя на бек файл, я пытался его посмотреть, не знаю почему это не дебажится, по крайне мере у меня не получилось, я дописал бек сохранения картинок и все работает.