Как правильно отправить форму с файлами через ajax?

Question

[daniel_wesson]

Есть форма (упрощенно):

<form @submit.prevent="sendForm">
  <input  type="text" name="name">
  <textarea name="message"></textarea>
  <input type="file" name="photos" multiple="multiple" id="photos">
  <button>Отправить</button>
</form>

На эту форму поставлен обработчик отправки:

let formData = new FormData();
let files = document.getElementByID('photos').files;

for (let i = 0; i < (files.length <= 5 ? files.length : 5); i++) {
  formData.append('image_'+i, files[i]);
}

formData.append('name', $(this.$el).data('name'));
formData.append('message', $(this.$el).data('message'));
formData.append('_token', $(this.$el).data('_token'));

$.ajax({
  url: $(this.$el).attr('action'),
  type: $(this.$el).attr('method'),
  cache: false,
  data: formData,
  processData: false,
  contentType: false,
  success: (data) => {
    console.log(data);
  },
  error: (error) => {
    console.log(error);
  }
});

При отправке laravel возвращает ошибку "CSRF token mismatch". Заметил, что если из ajax убрать параметр "processData: false", то лара все нормально обрабатывает, но в таком случае ругается уже js:

TypeError: "'append' called on an object that does not implement interface FormData."

Что делать? Может быть я кардинально всё делаю не так, а правильный способ гораздо проще?

Answer 1

[adam_carraway]

Сокрее всего здесь решение вашей проблемы https://stackoverflow.com/questions/32738763/larav... (второй комментарий)

Comments

[daniel_wesson]

Да, добавление заголовка помогло, спасибо. Но почему с заголовком работает, а если токен передавать в основном массиве, то уже нет?

[adam_carraway]

daniel_wesson, увы не смогу ответить на ваш вопрос, сам недавно начал изучать laravel

[Дмитрий]

daniel_wesson, потому что фреймворк ищет токен именно в заголовке, это же не данные. И вообще отправку токена можно автоматизировать.