Загрузка файлов с помощью Ajax, работающего на Postman, но не на браузер

Question

Я пытаюсь разрешить определенным пользователям загружать видео в API с помощью Ajax. Это работает на почтальоне, но при этом из браузера я получаю 500 Internal Server Error.

У меня нет доступа к серверу, поэтому я не могу показать логи сервера, но, по словам парня, он получает сообщение «ОПЦИИ», но не второе сообщение с multipart/form-data. Когда я проверяю данные формы в сетевом инструменте Chrome, он дает мне это .

И URL, который я добавляю для каждой загрузки, выглядит как это .

Два запроса в сетевом инструменте.

Кажется, что-то не так с тем, как публикуется моя форма, и я почти уверен, что это моя вина не на сервере, так как он работает с Почтальоном.

Код почтальона:

var form = new FormData();
form.append("video", "C:\\Users\\Sidhant\\Downloads\\examplevid.mp4");

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://apiurl/catagoryid/videotitle",
  "method": "POST",
  "headers": {
    "Authorization": "Bearer token",
    "Content-Type": "application/x-www-form-urlencoded",
    "cache-control": "no-cache",
    "Postman-Token": "token"
  },
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

Мой код такой же, за исключением того, как я получаю файл:

var fileinput = document.getElementById("fileinput").files[0];
var form = new FormData($('#fileinput')[0]);

С почтальоном видео добавляется в API, а через браузер выдается ошибка 500. Как я могу перестать получать эту ошибку, и что я могу попробовать. Я новичок в Ajax, поэтому я не знаком с такими проблемами.

Answer 1

Задача 1

var fileinput = document.getElementById("fileinput").files[0];
var form = new FormData($('#fileinput')[0]);

Если вы инициализируете FormData значением, это должен быть элемент формы .

Если вы хотите добавить файл, вам нужно создать объект, а затем добавить файл.

В любом случае, вы не должны получать файл и затем передавать его в jQuery. Это не имеет никакого смысла. jQuery работает с элементами HTML, Selectors и DOM, а не с файловыми объектами.

Или:

var form = document.getElementById("fileinput").form;
var data = new FormData(form);

или

var file = document.getElementById("fileinput").files[0];
var data = new FormData();
data.append("video", file, "filename.mp4");

Задача 2

Вы переопределяете Content-Type запроса, поэтому он не будет генерировать правильный из объекта FormData, и сервер не будет знать, как извлечь данные.

Удалить

"Content-Type": "application/x-www-form-urlencoded",

и

"mimeType": "multipart/form-data",

Asides

"async": true,

Это значение по умолчанию. Нет смысла устанавливать его явно.

"crossDomain": true,

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

Answer 2

Проблема заключается в том, как вы выбираете файлы в ваших данных.

var fileinput = document.getElementById("fileinput").files[0];
var form = new FormData($('#fileinput')[0]);

Вы правильно выбираете файл, используя обычный js, но затем используете Jquery и просто выбираете элемент ввода файла. Таким образом, вы пытаетесь присоединить сам элемент html, а не пользовательские данные.

Используйте это.

//null check on the input 
var fileinput = $('#fileinput').length ? $('#fileinput')[0].files[0] : null;
//Create the FormData and add the file to the FD
var form = new FormData();
form.append('video', fileinput );