使用 Ajax 上传文件在 Postman 但不是浏览器

Question

我试图让某些用户使用 Ajax 将视频上传到 API。这适用于 Postman，但是从浏览器执行此操作时，我收到 500 内部服务器错误。

我无权访问服务器，因此无法显示服务器日志，但据此人说，他收到了“OPTIONS”帖子，但没有收到带有multipart/form-data 的第二个帖子。当我在 chrome 网络工具中检查我的表单数据时，它给了我this。

我为每次上传附加的 url 看起来像 this。

The two requests in the network tool.

我的表单的发布方式似乎有问题，我很确定这是我的错，而不是服务器的错，因为它与 Postman 一起使用。

邮递员代码是：

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]);

使用 postman 时，视频会添加到 API，而通过浏览器会出现 500 错误。我怎样才能停止收到这个错误，我可以尝试什么。我是 Ajax 的初学者，所以我不熟悉这类问题。

Answer 1

问题 1

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

如果你用一个值初始化FormData，它应该是一个表单元素。

如果要添加文件，需要先创建对象，然后追加文件。

无论哪种方式，您都不应该获取文件然后将其传递给 jQuery。这根本没有意义。 jQuery 适用于 HTML、选择器和 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",

旁白

"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 );