首页 > 解决方案 > 使用 Ajax 上传文件在 Postman 但不是浏览器

问题描述

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

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

我为每个上传附加的 url 看起来像这样

网络工具中的两个请求。

我的表单的发布方式似乎有问题,我很确定这是我的错,而不是服务器的错,因为它与 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 的初学者,所以我不熟悉这类问题。

标签: javascriptjqueryajaxpostman

解决方案


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

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

推荐阅读