剃刀頁面上的 Dropzone 返回 400 狀態代碼

Question

我在 ASP.NET 核心 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方法。 請幫忙

Answer 1

將 dropzone.js 與 Razor Pages 一起使用會導致 400 的一件事是，表單中是否缺少 AntiforgeryToken。

這通常是自動注入的，但刪除 _viewimports 或其 taghelpers 會阻止這種情況。

要驗證只需在<form/>元素中添加此行或查看調試控制台以獲取錯誤消息。

@Html.AntiForgeryToken()

Answer 2

在 sendmultiple 中添加這一行，它將解析您的 pb：

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

Answer 3

我通過設置headers選項讓它工作

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

當然，您需要在<form />元素中或在頁面中顯式添加@Html.AntiForgeryToken()