问题1

Question

我试图让某些用户使用Ajax将视频上传到API。这适用于Postman，但是从浏览器执行此操作时出现500 Internal Server Error。

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

我为每次上传添加的网址看起来像this。

似乎我的表单发布方式出了点问题，我敢肯定这是我的错，而不是服务器的错，因为它可以与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]);

使用邮递员将视频添加到API，而通过浏览器则将显示500错误。我如何才能停止收到此错误，我可以尝试做些什么。我是Ajax的初学者，所以我对这类问题不熟悉。

Answer 1

问题在于您如何选择表单数据中的文件。

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

Answer 2

问题1

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

如果使用值初始化FormData，则它应该是 form元素。

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

无论哪种方式，您都不应获取文件，然后将其传递给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,

这没有任何作用，除非您发出相同的原始请求，该请求被重定向为交叉原始。通常没有必要进行设置。

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

2 个答案:

问题1

问题2

除