.net core web api（跨域），通过ajax发布图像base64String不起作用答案

【问题标题】：.net core web api (cross domain), posting image base64String via ajax not working.net core web api（跨域），通过ajax发布图像base64String不起作用
【发布时间】：2020-06-26 14:12:42
【问题描述】：

我正在尝试将几个参数（包括 base64String）从我的站点域 (https://localhost/site1) 发送到托管在域 (https://localhost/siteAPI) 上的 Web api

这是我所有的ajax

            var formData = new FormData();
            formData.append('base64image', base64ImageContent);
            
            $.ajax({
                url: 'https://localhost/SiteAPI/api/PdfCreator',
                type: "POST",
                data: formData,
                processData: false,
                contentType: false
            });

我的 API 控制器：

 [Route("api/[controller]")]
    [ApiController]
    [EnableCors("_myAllowSpecificOrigins")]
    public class PdfCreatorController : ControllerBase

        [HttpPost]
        public IActionResult CreateImage([FromBody]string base64image)
        {
            return Ok();
            
        }

这是从画布图表中提取图像的方式（使用 chartjs）：

var base64ImageContent = image.replace(/^data:image\/(png|jpg);base64,/, "");

post 操作中的数据始终为空，我也收到这种类型的错误：

{"type":"https://tools.ietf.org/html/rfc7231#section-6.5.13","title":"不支持的媒体类型","status":415,"traceId": "|66d9ee0a-401aa3e22a2bb6e1。"}

编辑：这是表单 HTML（我需要提交此表单才能使帖子正常工作吗？）

<form asp-controller="Assessments" asp-action="List" method="post">
            <div class="form-row">
                <div class="alert alert-dismissible " id="alert" role="alert">

                </div>
            </div>
            <div class="form-inline mb-3">
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="chkGetAll" asp-for="IncludeInactive">
                    <label class="custom-control-label" for="chkGetAll">Include Inactive Assessments?</label>
                </div>
            </div>
            <div style="overflow: auto; height: 450px;">
                <div id="divHidden" style="width:700px;height:450px;">
                    <canvas id="canvas" height="10" width="10"></canvas>
                    <img id="canvasimage" />
                </div>
            </div>
        </form>

我头上的头发很少，请帮忙！

【问题讨论】：

有什么更新吗？我的回复能回答你的问题吗？

标签： jquery post asp.net-core-webapi

【解决方案1】：

网址：https://localhost/SiteAPI/api/PdfCreator

控制器动作：CreateImage

您似乎重定向到了错误的操作

【讨论】：

动作很好，因为在 api 中只有 1 个 post 方法，断点有效，但 action 方法参数为空。还用 HTML 部分更新了我的问题。谢谢

【解决方案2】：

我建议您可以尝试删除[FromBody] 并使用[FromForm]。如下：

    public IActionResult CreateImage([FromForm]string base64image)

根据您的代码，我发现您将表单数据从 ajax 传递到 web api。但是你已经在你的 web api 中添加了一个 frombody 作为模型绑定属性。

据此article：

当参数有 [FromBody] 时，Web API 使用 Content-Type 标头来选择格式化程序。

frombody 不支持Content-Type: multipart/form-data，它不会将数据模型绑定到base64image。这就是字符串值始终为空的原因。

这是一个测试演示。

我使用下面的 ajax 发送请求并在操作中获取数据：

<script>
    function getUploadedFile(Sle) { 
        $.ajax({
            url: "https://localhost:5001/api/Values/CreateImage",
            data: { "base64image": Sle.value} ,
            type: "Post",
            dataType: "text",
            success: function (data) {
                console.log(data);
                $("#uploadedFile").val(data);

            },
            error: function (data) {
                alert(data);
            }
        });
    }
</script>

行动：

    [HttpPost]
    public IActionResult CreateImage([FromForm] string base64image)
    {
        return Ok();

    }

结果：

【讨论】：