为什么FormData会导致400 Bad Request错误？

Question

在尝试通过 AJAX 提交包含文件的表单时遇到 400 错误（错误请求），尽管其他不涉及文件上传的 POST 请求能够成功执行。我已经尝试调整了 contentType、processData 以及 enctype 等设置，但问题依旧。

问题代码示例：

原本的 AJAX 调用代码是这样的，它使用了 myform.serialize() 作为数据，并且设置了默认的 contentType 和 processData 值，这导致文件上传失败：

$.ajax({
    url: formUrl,
    data: myform.serialize(), 
    dataType: "html",
    contentType: "application/x-www-form-urlencoded",
    processData: false,
    method: "post",
    // 成功和错误处理...
});

解决过程：

在多次尝试后，我发现正确的做法是使用 FormData 对象来包含表单数据和文件，同时调整 AJAX 调用的相关参数，以确保二进制文件能正确发送到服务器端。以下是修正后的 AJAX 代码段：

var formData = new FormData();

$("[class^='fileUpload']").each(function () {
    var fileInput = $(this)[0];
    var file = fileInput.files[0];
    formData.append(this.id, file);
});

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

$.ajax({
    url: "/pageprocessing/saveuserreference",
    data: formData,
    dataType: "html",
    contentType: false, // 必须为 false，让浏览器自动设置正确的 MIME 类型
    processData: false, // 防止 jQuery 将数据转换为字符串
    method: "post",
    success: function (result) {
        $(".close-button").click();
    },
    error: function (err) {
        console.log(err);
    }
});

控制器端点：

服务器端的接收方法需要能够处理多部分表单数据，特别是 Request.Form.Files 来获取上传的文件。但是，之前提到的 OnPost 方法并未展示如何具体处理这些数据，只是提到了有一个断点未被触发。确保你的后端处理方法如下所示，能够正确地处理文件上传：

[HttpPost]
public IActionResult SaveUserReference(IFormFileCollection files)
{
    // 这里处理上传的文件，例如：
    foreach (var file in files)
    {
        // 检查文件并保存到所需位置
    }

    // 返回相应的操作结果，比如重定向或 JSON 响应
}

Jarod42 · Answer

您是否尝试过将 contentType: "application/x-www-form-urlencoded" 改为 contentType: 'multipart/form-data' 或者 contentType: false？

当使用这些 contentType 设置时，您可以直接在 AJAX 的 data 字段中发送 myform，而无需对其进行序列化。这样可以更适配文件上传的需求。

NathanOliver · Answer

Razor 页面默认启用了防伪令牌验证，因此在使用 AJAX 发送请求时，需要将此令牌添加到请求头中。如果未添加，可能会收到 400 错误（错误请求）。

当通过 AJAX 发送含有文件输入的数据时，应当设置：

contentType: false
processData: false
并且使用 FormData 对象替代 form.serialize() 来包含表单数据和文件。

以下是一个完整的、可工作的示例：

Index.cshtml 页面中包含了一个表单用于编辑用户文档，包括文本输入和文件上传功能。该页面通过 jQuery 处理表单提交事件，使用 AJAX 发送包含文件的数据到服务器，并确保了防伪令牌的传递。

Index.cshtml.cs 代码后端定义了 OnPost 方法来处理从表单提交过来的数据，包括 UserDocument 对象及上传的文件。

此示例展示了如何正确配置 AJAX 调用来处理文件上传和防伪令牌验证，确保在提交包含文件的表单时不会遇到 400 错误。