剃刀页面上的 Dropzone 返回 400 状态代码答案

【问题标题】：Dropzone on razor Page returns 400 status code剃刀页面上的 Dropzone 返回 400 状态代码
【发布时间】：2018-10-11 20:23:58
【问题描述】：

我在 ASP.NET core 2.0 的 RAZOR 页面上使用 DropZone 以及其他类似这样的表单输入 -

DzDemo.cshtml 页面 -

<form method="post" enctype="multipart/form-data">
    <input type="text" id="Username" name="Username" />
    <div class="dropzone" id="my-dropzone" name="mainFileUploader">
        <div class="fallback">
            <input name="file" type="file" multiple />
        </div>
    </div>
</form>
<div>
    <button type="submit" id="submit-all"> upload </button>
</div>

JS:-

Dropzone.options.myDropzone = {
            url: "/DzDemo?handler=Upload",
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            acceptedFiles: "image/*",
           // paramName: myParamName,
            init: function () {

                var submitButton = document.querySelector("#submit-all");
                var wrapperThis = this;

                submitButton.addEventListener("click", function () {
                    wrapperThis.processQueue();
                });

                this.on('sendingmultiple', function (data, xhr, formData) {
                    formData.append("UserName", $("#Username").val());
                });
                this.on('error',
                    function (file, response) {
                        console.log(response);
                        alert(response);
                    });
            }
        };

DzDemo.cshtml.cs 页面：-

[HttpPost]
        public IActionResult OnPostUpload()
        {
            var data = Request.Form; //This is 
            return Page();
        }

但我从服务器收到 400 响应，我无法处理上传的文件服务器端而且它不会在服务器端使用 Upload 方法。请帮忙

【问题讨论】：

查看Upload files to a Razor Page in ASP.NET Core 获取一些提示，但您需要将IFormFile 添加到您的模型中。
@MarkG 我正在使用 DropZone.js 。你能解释一下吗
DropZone.js 在这里不相关，它与表单发布后的模型绑定有关。你需要像[BindProperty] public IFormFile file { get; set; } 这样的东西。
没有帮助。还是不行

标签： c# asp.net-mvc asp.net-core dropzone.js razor-pages

【解决方案1】：

将 dropzone.js 与 Razor 页面一起使用会导致 400 的一件事是表单中缺少 AntiforgeryToken。

这通常是自动注入的，但删除 _viewimports 或其 taghelpers 会阻止这种情况。

要验证，只需在 <form/> 元素中添加这一行或查看调试控制台中的错误消息。

@Html.AntiForgeryToken()

【讨论】：

【解决方案2】：

我通过设置 headers 选项让它工作

headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() }

当然，您需要 <form /> 元素或在页面中明确添加 @Html.AntiForgeryToken()

【讨论】：

【解决方案3】：

在sendingmultiple中添加这一行，它会解决你的pb：

this.on('sendingmultiple', function (data, xhr, formData) {
    xhr.setRequestHeader("XSRF-TOKEN",
                     $('input:hidden[name="__RequestVerificationToken"]').val());
});

【讨论】：