Как я могу загрузить несколько фотографий в приложение Laravel через ajax, используя vanilla javascript?

Question

У меня есть эта форма, и мне нужно иметь возможность отправлять данные на сервер через ajax, пользователь может загрузить 1 или более фотографий, или они могут вообще не загружать фотографии, в любом случае, как я могу отправить данные, взятые из`type = file input и загрузить его на сервер в фоновом режиме?

Вот соответствующая часть формы:

<form action="" method="POST" enctype="multipart/form-data">
            @csrf
                <label for="photos">Photos:</label>
                <input type="file" name="photos[]" id="photos" class="form-control" multiple>


                <button class="btn btn-success mt-3" onclick="ajaxify(event)">Submit</button>
            </div>
        </form>

А вот соответствующая часть javascript:

function ajaxify(event) {
            event.preventDefault();
            let failedValidation = false;

           // I removed parts of the code where I load other dataand do validation, irrelevant to the question.

            let photos = [];


            if(document.getElementById('photos').value !== '') {
                photos = document.getElementById('photos');   // I know this is incorrect, but I don't know what to do here.
            }

           // Here photos.value return something like c://fake/filename
           // And it doesn't return more than 1 file even, so anyway I am definitely doing this wrong.


            if(! failedValidation) {
                axios.post('/listing/create', {
                    client_name: name.value,
                    client_phone_number: client_phone_number.value,
                    category: category.value,
                    type: type.value,
                    governorate: governorate.value,
                    city: city.value,
                    space: space.value,
                    price: price.value,
                    furnished_status: furnished_status.value,
                    payment_type: payment_type.value,
                    initial_deposit: initial_deposit.value,
                    monthly_amount: monthly_amount.value,
                    notes: notes.value,
                    photos: photos.value, // So this should be an array of uploaded files.
                })
                .then((resp) => {
                    invalid.classList.add('d-none');
                    console.log(resp);
                })
            }
        }

Что я хочу? Нужно ли загружать загруженные мной файлы для Laravel на стороне сервера приложения, когда я делаю обычное сообщение и выполняю dd($request->photos);Я получаю массив загруженных файлов, я не уверен, возможно ли это с ajax / json или нет, но это то, что я хочу для обработки фотографий.

Небольшое примечание, я используюПакет библиотеки мультимедиа Laravel, если это что-то меняет.

То, что я до сих пор делал исследует вопрос, и я прочитал, что мне нужно использовать FormData () , яЯ никогда не использовал это раньше, и у меня есть пара вопросовНс, мне нужно поместить все мои данные в этот FormData() объект и передать их в axios?Или мне просто нужно это для фото?Я еще не пробовал делать что-либо из этих двух вещей, любое руководство будет высоко оценено.

Answer 1

Вы получаете только один файл, потому что все файловые объекты хранятся в массиве в атрибутах files.Просто добавьте их в ваш массив photos.

function ajaxify(event) {
  event.preventDefault();

  // use files attribute to get an array of the files
  var photoFiles = document.getElementById("photos").files;

  // using the array of files, create an array 'photos' of FormData objects
  let photos = [];
  for (let photo of photoFiles) {
    photos.push(new FormData(photo);
  }

  // turn your 'photos' array into a javascript object
  let photos = arr2obj(photoFiles);

  // this should fix the empty array problem you were having
  // pass 'photos' to the ajax data

  // ....
}

РЕДАКТИРОВАТЬ: Согласно этот пост объект FormData требуется для загрузки файла с использованием AJAX какодин из комментаторов указал.Ваш массив должен быть массивом FormData объектов.

РЕДАКТИРОВАТЬ: Отправка массивов через JSON является проблематичной.Превратите ваш массив в объект.Вы можете использовать простую функцию, подобную этой, для создания объекта из массива.

function arr2obj(arr) {
  var obj = {};
  for (let i=0; i<arr.length; i++) {
    obj['photo'+i] = arr[i];
  }
  return obj;
}