为什么FormData会导致400错误请求？

Question

更新： 一些奇怪的行为。如果我发布到控制器，它就会工作并且我会获取文件和数据。但是，如果我发布到页面本身（后面有 Razor 代码）

public void OnPost(...)

，我会收到 400 错误。这几乎就像页面找不到自己一样，这也很奇怪，因为该页面上的其他方法

OnGet

和

OnGetData

可以正常工作。

浏览器控制台中显示的错误在这里

如果您单击链接，它会转到该页面，所以我知道该路径是有效的。

我将所有内容都放在页面上，以便它是独立的，并且我可以在任何地方重用该页面，而且我不必担心其他地方的更改会破坏该页面，也不必担心该页面的更改会破坏其他任何内容。这些页面是数据驱动的，因此通过数据库进行配置，我有大约 7 或 8 个页面（这种类型），它们都工作得很好，但这是这种类型中第一个将文件上传作为其功能一部分的页面。

---

问题： 我有以下情况。这工作得很好，但是当我尝试使用

formData

启用文件上传时，我收到 400（错误请求）错误。我尝试了各种内容类型和 enctype，但似乎没有任何效果。关于出了什么问题有什么想法吗？

您可以看到注释行。如果我切换到那些我总是收到 400 '错误请求'

Visual Studio 2022，Net 8。

我的表格（BS5 模态）

<form id="frmItemLocalForm" method="post" name="frmItemLocalForm" novalidate="novalidate" enctype="multipart/form-data">
    @Html.AntiForgeryToken()
    <input type="hidden" name="controlId" id="controlId" value="@ViewData["controlid"]" />
    <input type="hidden" name="itemId" id="itemId" value="@ViewData["itemId"]" />
    <input type="hidden" asp-for="UserDocument.Created" name="Created" />

    <!--Modal Header-->
    <div class="modal-header">
        <h4 class="modal-title">Edit User Document</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>

    <!-- Modal body -->
    <div class="modal-body">

        <div class="row my-1">
            <label class="col-form-label col-md-2">Name</label>
            <div class="col-md-10">
                <input type="text" class="form-control" placeholder="Name" asp-for="UserDocument.DocumentName" name="DocumentName" data-rule-required="true" />
            </div>
        </div>

        <div class="row my-1">
            <label class="col-form-label col-md-2">File</label>
            <div class="col-md-10">
                <input type="file" class="form-control fileUpload" placeholder="User Document" name="userdocumentfileupload" id="userdocumentfileupload" data-rule-required="true" required />
                <br />@Model.UserDocument?.DocumentName @Model.UserDocument?.FileName
            </div>
        </div>
    </div>

    <!-- Modal footer -->
    <div class="modal-footer">
        <button type="submit" id="editLocalForm" class="btn btn-primary">OK</button>
        <button type="button" class="btn btn-danger close-button" data-bs-dismiss="modal">Close</button>
    </div>
</form>

$(document).on("click", "#editLocalForm", function (e) {
    e.preventDefault();
    e.stopPropagation();

    var myform = $("#frmItemLocalForm");
    var valid = myform.valid();

    if (valid) {

        var formData = new FormData();

        //$(".fileUpload").each(function () {
        //    var fileInput = $(this)[0];
        //    var file = fileInput.files[0];

        //    if (file.size > 0) {
        //        formData.append($(this).attr("id"), file);
        //    }
        //});

        //formData.append("myFormData", myform.serialize());

        $.ajax({
            url: formUrl,
            data: myform.serialize(),//formData,
            dataType: "html",
            contentType: "application/x-www-form-urlencoded",
            processData: false,
            method: "post",
            success: function (result) {
                $(".close-button").click();
                table.ajax.reload(null, false);
            },
            error: function (err) {
                console.log(err);
            }
        });
    }
});

服务器端点。 我这里有一个断点，甚至没有被击中

public void OnPost()
{
    ... Request.Form.Files...

}

Answer 1

您是否尝试过将

contentType: "application/x-www-form-urlencoded"

更改为

contentType: 'multipart/form-data'

？