c# - 使用引导文件输入插件上传文件时出现错误代码 400
问题描述
我有一个问题,无论我做什么,无论有多少文件,无论我是否删除了 extraData 选项,也无论我是否在控制器操作中使用参数,操作都永远不会到达(我的断点永远不会触发)。
HTML 代码:
<div id="logoDiv">
<input id="fileInput" name="files" type="file"
data-allowed-file-extensions='["png", "jpg", "jpeg", "tiff"]' multiple/>
</div>
Javascript代码:
var plugin = $('#fileInput').fileinput({
showCaption: false,
showPreview: true,
dropZoneEnabled: false,
theme: "fa",
browseClass: "btn btn-ey-upload btn-ey-utility",
removeClass: "btn btn-ey-upload btn-ey-utility",
uploadClass: "btn btn-ey-upload btn-ey-utility",
showClose: false,
uploadAsync: false,
uploadUrl: "/GeneralInterview/UploadLogo",
//uploadExtraData: { id: 1 }
});
控制器代码:
[HttpPost]
public JsonResult UploadFile(List<IFormFile> files)
{
List<string> fileNames = new List<string>();
return Json(fileNames)
}
我也尝试过 IActionResult 和 JsonResult 。
我真的不知道出了什么问题,任何其他资源似乎都在做我所做的事情,但它只是不起作用。
编辑:响应和请求标头
content-length: 0
content-security-policy: default-src 'self'; style-src 'self' fonts.googleapis.com 'unsafe-inline'; font-src 'self' fonts.gstatic.com; script-src 'self' https://ajax.aspnetcdn.com 'nonces-SNIP'; img-src 'self' data:;
date: Fri, 04 Sep 2020 07:26:48 GMT
status: 400
x-content-type-options: nosniff
x-frame-options: DENY
x-powered-by: ASP.NET
x-rate-limit-limit: 7d
x-rate-limit-remaining: 999965
x-rate-limit-reset: 2020-09-11T07:24:01.3268956Z
x-sourcefiles: =?UTF-8?B?QzpcVXNlcnNcR1gyNjRMSFxTb3VyY2VcUmVwb3NcRU9ZLUVZXEVPWVdlYlxHZW5lcmFsSW50ZXJ2aWV3XFVwbG9hZExvZ28=?=
x-xss-protection: 1;mode=block
Request URL: https://localhost:44357/GeneralInterview/UploadLogo
Request Method: POST
Status Code: 400
Remote Address: [::1]:44357
Referrer Policy: no-referrer-when-downgrade
content-length: 0
content-security-policy: default-src 'self'; style-src 'self' fonts.googleapis.com 'unsafe-inline'; font-src 'self' fonts.gstatic.com; script-src 'self' https://ajax.aspnetcdn.com 'nonces-SNIP'; img-src 'self' data:;
date: Fri, 04 Sep 2020 07:26:48 GMT
status: 400
x-content-type-options: nosniff
x-frame-options: DENY
x-powered-by: ASP.NET
x-rate-limit-limit: 7d
x-rate-limit-remaining: 999965
x-rate-limit-reset: 2020-09-11T07:24:01.3268956Z
x-sourcefiles: =?UTF-8?B?QzpcVXNlcnNcR1gyNjRMSFxTb3VyY2VcUmVwb3NcRU9ZLUVZXEVPWVdlYlxHZW5lcmFsSW50ZXJ2aWV3XFVwbG9hZExvZ28=?=
x-xss-protection: 1;mode=block
:authority: localhost:44357
:method: POST
:path: /GeneralInterview/UploadLogo
:scheme: https
accept: application/json, text/javascript, */*; q=0.01
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
content-length: 58916
content-type: multipart/form-data; boundary=----WebKitFormBoundaryDm8BfGYWiNAUmPUI
cookie: .AspNetCore.Antiforgery.cookiedata; .AspNetCore.Antiforgery.cookiedata
origin: https://localhost:44357
referer: https://localhost:44357/GeneralInterview/Index/16014
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36
x-requested-with: XMLHttpRequest
logoFiles: (binary)
logoFiles: (binary)
initialPreview: []
initialPreviewConfig: []
initialPreviewThumbTags: []
Form Data files = logoFiles,从那以后我刚刚改了名字。
提前致谢。
解决方案
在 ASP.NET Core 3.1 中使用 bootstrap-fileinput 插件的测试
看法
name="files"
必须与控制器的参数名称相同 List<IFormFile> files
。
@{
Layout = null;
}
<div id="logoDiv">
<input id="fileInput" name="files" type="file" class="file" data-allowed-file-extensions='["png", "jpg", "jpeg", "tiff"]' multiple data-theme="fas">
</div>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/themes/fa/theme.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/locales/(lang).js"></script>
<script>
$("#fileInput").fileinput({
showCaption: false,
showPreview: true,
dropZoneEnabled: false,
theme: "fa",
browseClass: "btn btn-ey-upload btn-ey-utility",
removeClass: "btn btn-ey-upload btn-ey-utility",
uploadClass: "btn btn-ey-upload btn-ey-utility",
showClose: false,
uploadAsync: false,
uploadUrl: "/GeneralInterview/UploadLogo",
//uploadExtraData: { id: 1 }
});
// CATCH RESPONSE
$('#fileInput').on('filebatchuploaderror', function (event, data, previewId, index) {
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
});
$('#fileInput').on('filebatchuploadsuccess', function (event, data, previewId, index) {
var response = data.response;
alert(response);
});
</script>
控制器
这里我使用一个路由属性来匹配请求 URL/GeneralInterview/UploadLogo
[Route("/GeneralInterview/UploadLogo")]
[HttpPost]
public JsonResult UploadFile(List<IFormFile> files)
{
List<string> fileNames = new List<string>();
foreach(IFormFile file in files)
fileNames.Add(file.FileName);
return Json(fileNames);
}
2020 年 4 月 9 日更新
F12
检查请求的详细信息
推荐阅读
- javascript - 隐藏按钮时更改 div 颜色
- makefile - 如何使用Makefile隐式规则构建Makefile同一目录下不存在的文件
- smtp - 自定义 SMTP 服务器
- javascript - 在选项选择中拆分 json
- javascript - 无法在 react.js webb 应用程序中使用 chart.js 制作完美的线性图
- d3.js - 为每个分类值分配不同的 y 坐标
- python - 仅当四肢具有相同的值并且限制为最多出现时,如何填充数据空白?
- javascript - 嗨,我正在尝试获取 id 属性但没有运气,这是我的代码
- vhdl - 在 VHDL 中对向量进行排序
- php - 您可以使用 laravel 包自动附加自定义 env 字段吗