将 Base64 图像从视图传递到 ASP.net Core 3.1 控制器答案

【问题标题】：Pass Base64 Image into ASP.net Core 3.1 Controller from View将 Base64 图像从视图传递到 ASP.net Core 3.1 控制器
【发布时间】：2020-08-02 00:07:32
【问题描述】：

我正在尝试将位于 javascript 变量中的 Base64 图像字符串传递给控制器。到目前为止，我一直没有成功。我已经确认字符串不是未定义的，我认为问题出在我使用的 AJAX 上。我的问题是，如何正确地将数据发送到控制器？

查看

<div class="col-md-4">
    <form asp-action="Create" enctype="multipart/form-data">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Title" class="control-label"></label>
            <input asp-for="Title" class="form-control" />
            <span asp-validation-for="Title" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input id="ImageFile" accept="image/*">
        </div>
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" id="su" />
        </div>
    </form>
</div>

为了解释，我正在使用一个名为 slim cropper 的 3rd 方插件来上传图像。该脚本查找指定的输入标签（在本例中为 ImageFile），并为用户创建一个上传图片的接口。

无论如何，我设法使用这个 java 脚本从这个插件中获取 base 64 图像到一个变量中：

...

// get a reference to the Create button
var button = document.querySelector('#submit');
var pic

// listen to clicks on the submit button
button.addEventListener('click', function () {
    alert("working")
    pic = $('.slim-area .slim-result img').attr('src');
});

...

完成后，我尝试使用 AJAX 将这些数据传输到控制器

...

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "/Image/Create",
    data: JSON.stringify(pic),
    dataType: "json",
    success: function (response, data) {
        alert(response.someValue);
    },
    error: function (err) {
    }
});

...

当我运行代码时，我设置为在控制器中获取数据的模型总是返回为 null。这是非常简单的控制器代码

...

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Create([FromForm] ImageModel imageModel)
    {
        return Json(new { someValue = "It's ok" });
    }

...

和模型

...

public class ImageModel
{
    [Key]
    public int ImageId { get; set; }
    [Column (TypeName="nvarchar(50)")]
    [DisplayName("Image Name")]
    public string ImageName { get; set; }
    [Column(TypeName = "nvarchar(100)")]
    public string Title { get; set; }
    [NotMapped]
    public byte[] pic { get; set; }

}

...

最终的目标是将这些上传的图片放到指定的文件夹中，但在此之前，我必须将数据传入才能使用。我会很感激我能得到的任何帮助。感谢您的浏览，希望我正确地遵守了发帖规则。

【问题讨论】：

如果您将字符串传递给您的 api 方法，该方法接受 ImageModel 类型的对象，那么这将不起作用。
谢谢你，将参数更改为字符串类型并将 FromForm 更改为 FromBody 就可以了。

标签： javascript ajax asp.net-mvc asp.net-core

【解决方案1】：

如 cmets 中所述，我需要参数为字符串类型才能传递数据。此外，由于数据已经是字符串形式，因此不需要 JSON Stringify 方法。这些事情搞定后，程序就正确执行了。

这是最终的工作代码：

查看

<div class="row">
<div class="col-md-4">
    <form asp-action="Create" enctype="multipart/form-data">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Title" class="control-label"></label>
            <input asp-for="Title" class="form-control" />
            <span asp-validation-for="Title" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="ImageFile" class="control-label">
            </label>
            <input asp-for="ImageFile" class="Form-Control" />

        </div>
        
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" id="submit" />
        </div>
    </form>
</div>

控制器

...

    public IActionResult Create ([FromBody] string pic, [Bind("ImageId, Title")] ImageModel imageModel)
    {
        var model = new ImageModel();
        var uniquefilename = Guid.NewGuid();
        var picPath = _webHostEnvironment.WebRootPath.ToString() + @"\Images\";
        var base64Data = Regex.Match(pic, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
        var binData = Convert.FromBase64String(base64Data);

        using (var imageFile = new FileStream(picPath + uniquefilename + ".png", FileMode.Create))
        {
            imageFile.Write(binData, 0, binData.Length);
            imageFile.Flush();
        }

        _context.Add(imageModel);
        return View(imageModel);
        


    }

...

Javascript

...

    // get a reference to the Create button
    var button = document.querySelector('#submit');
    //Base64 String
    var pic

    //Check for changes in picture
    var outExists;

    //set the value to look for change
    outExists = $('.slim-area .slim-result img.out').attr('src');

    // listen to clicks on the submit button
    button.addEventListener('click', function () {
        //If there is no change continue with pass orginal base64 image
        //else pass changed image
        if (outExists == null) {
            pic = "\"" + $('.slim-area .slim-result img.in').attr('src') + "\"";
        } else {
            pic = "\"" + $('.slim-area .slim-result img.out').attr('src') + "\"";
        }


        //Send base64 Image to Controller
        $.ajax({
            contentType: "application/json",
            method: "post",
            data: pic,
            success: function (response) {
                console.log("Executed...")
            },
            error: function (xhr, status, error) {
                var errorMessage = xhr.status + ': ' + xhr.statusText
                alert('Error - ' + errorMessage);
            }
        });
    });

...

感谢所有观看的人。

【讨论】：