javascript - 将 Base64 图像从视图传递到 ASP.net Core 3.1 控制器
问题描述
我正在尝试将位于 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) {
}
});
...
当我运行代码时,我设置为在控制器中获取数据的模型总是返回为空。这是非常简单的控制器代码
...
[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; }
}
...
最终目标是将这些上传的图片放入指定的文件夹中,但在此之前,我必须将数据传入才能使用。我会很感激我能得到的任何帮助。感谢您的浏览,我希望我正确地遵循了发布规则。
解决方案
如评论中所述,我需要参数为字符串类型才能传递数据。此外,由于数据已经是字符串形式,因此不需要 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);
}
});
});
...
感谢所有看过的人。
推荐阅读
- c - Dr.Memory 找不到可达泄漏的行号
- angularjs - 在 Hybrid Angular 应用程序的 app.module 的构造函数中注入 Angular 服务
- c# - 如何在 abp 框架中使用 nSubstitute 模拟依赖项,
- c# - 不应忽略没有副作用的函数的返回值
- ruby-on-rails - 在 Rails 6 中使用 partials 来划分文件
- c# - 无法通过 SingleValueExtendedProperty 找到特定消息
- scenekit - ARKit相机框架中的纹理ARMeshGeometry?
- java - 在 docker 中部署到 wildfly 的 root
- elasticsearch - 获取 ElasticSearch 中一个字符串字段的平均长度
- c# - JSON响应没有在C#中反序列化?