如何从 Razor PageModel 中的 Javascript 检索 FormData (HtmlFormElement) 数据？

Question

我正在尝试使用 ajax 将 base64 字符串发送到我的 Razor PageModel。 base64 字符串是 Croppie 结果的结果。任何帮助将不胜感激。我尝试了以下方法：

1) 创建一个 FormData 表单并将其发送到我的 PageModel：

        var f = new FormData();
        f.append('s',base64)

        $.ajax({
            url: "?handler=SaveIcon",
            data: f
        });

结果：

        jquery.js:8463 Uncaught (in promise) TypeError: Illegal invocation
        at add (jquery.js:8463)
        at buildParams (jquery.js:8450)
        at Function.jQuery.param (jquery.js:8483)
        at Function.ajax (jquery.js:9073)
        at ChangeProfilePhoto:205

2) 直接通过ajax传递base64字符串:

        $.ajax({
            url: "?handler=SaveIcon",
            data: { 's': base64 }
        });

结果： URI 太长

3) 通过post发送base64字符串:

        var token = $('input[name="__RequestVerificationToken"]').val();
        var headers = {};
        headers['__RequestVerificationToken'] = token;

        var f = new FormData();
        f.append('s', base64);

        $.ajax({
            headers: headers,
            url: "?handler=SaveIcon",
            method: "POST",
            data: f,
            contentType: false,
            processData: false
        });

结果： 400 错误请求。

Answer 1

您需要将 processData 和 contentType 参数设置为 false

var f = new FormData();
f.append('s',base64)

$.ajax({
    url: "?handler=SaveIcon",
    method: "post",
    data: f,
    contentType: false,
    processData: false
});

为了通过 headers 传递防伪令牌，使用默认的 header 名称（如果没有配置其他）RequestVerificationToken（没有前导下划线）

var headers = {
    RequestVerificationToken: token
};

或者您也可以将其作为 FormData 传递

var f = new FormData();
f.append('s',base64);
f.append("__RequestVerificationToken", token);

如何从 Razor PageModel 中的 Javascript 检索 FormData (HtmlFormElement) 数据？

How can I retrieve FormData (HtmlFormElement) data from Javascript in Razor PageModel?

ajax

base64

asp.net-core

croppie