javascript - 使用 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 的初学者,所以我不熟悉这类问题。
解决方案
问题是您如何选择表单数据中的文件。
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 );
推荐阅读
- javascript - 如何从 JQuery 代码重写纯 JavaScript 代码?
- reactjs - 当所有数据都已路由到此屏幕时,如何将此移动无字段更新到 Firestore 数据库
- php - 我如何用我自己的风格编辑learnpress bydefault archive-course.php 页面?
- javascript - 为什么我的表单即使在溢出后也没有滚动:滚动?
- javascript - 如果锚标记构成 url 的一部分,我如何使用 js 强制浏览器窗口转到特定的锚标记?
- python - Kivy 如何访问子小部件中的小部件
- go - 如何将正则表达式放入golang的proto结构中?
- mongodb - 将数据从 MondoDB localhost 导入到 MongoDB Atlas
- spartacus-storefront - asm 功能模块未启动
- go - 尝试检测 multipart/form-data 请求中是否存在多个文件,并拒绝多个附件