POST конвертировать в GET, когда я хочу получить formData? - PullRequest
0 голосов
/ 26 сентября 2019

Я хочу отправить изображение на сервер

мой код отлично работает в Chrome версии 77.0.3865.90

НО

в Mozilla (версия69.0.1) Метод POST изменяется на GET с этой ошибкой

Форма содержит входной файл, но отсутствует метод = POST и enctype = multipart / form-data в форме.Файл не будет отправлен.

URL запроса: http://localhost:3000/...

Метод запроса: GET

Код статуса: 200

<form class="form-horizontal" id="form" >

<div class="col">
 <label for="images" class="control-label">image</label>
 <input type="file" class="form-control" name="images" id="images" >
</div>

<div class="form-group row">
   <div class="col">
        <button type="submit" class="btn btn-danger">Send</button>
   </div>
</div>

</form>
<script>
document.getElementById('form').addEventListener('submit' , async function(event) {

let images = document.querySelector('input[name="images"]');

let formData = new FormData();

formData.append('images' , images.files[0] );

try {
         const response = await fetch('http://exampleurl.com/profile', {

             method: 'POST',
             headers: {
               'X-Requested-With': 'XMLHttpRequest',
               'X-CSRF-Token': "<%= req.csrfToken() %>",
             },
             body: formData,
             credentials: 'same-origin'
             });
             } catch (error) {
               console.error(error);
    }
    })

</script>

Я не могу использовать method = "POST" и enctype = "multipart / form-data" в форме, потому что токены csrf не могут быть реализованы в формах с multipart / form-Тип данных

1 Ответ

0 голосов
/ 26 сентября 2019

Я подозреваю, что ваша форма может быть отправлена ​​дважды.

1) Обработчик событий AJAX 2) Кнопка отправки в форме, которая фактически отправляет форму через html

Попробуйте добавить обработчик событий в саму форму, а не кнопку отправки.Там вы можете запретить форме делать то, что она хочет, так что только ваш AJAX-запрос будет обработан.https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

...