使用引导文件输入插件上传文件时出现错误代码 400

Question

我有一个问题，无论我做什么，无论有多少文件，无论我是否删除了 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: []

表单数据 files = logoFiles, I have just changed the name since then.

提前致谢。

Answer 1

在 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查看请求详情