将Base64图像发布到Mvc控制器

考虑这个base64编码图像

我想将此src发布到Mvc控制器，但是当使用ajax发布时获取null是post方法。

  var file = document.getElementById("base64image").src; var formdata = new FormData(); formdata.append("base64image", file); $.ajax({ url: "http://localhost:26792/home/SaveImage", type: "POST", data: file }); 

Mvc控制器

  [HttpPost] public void SaveImage(Image file) { } 

我认为我使用的数据类型对此无效，请建议我在这里可以做什么。

完整的Html代码

       body { font-family: Helvetica, sans-serif; } h2, h3 { margin-top:0; } form { margin-top: 15px; } form > input { margin-right: 15px; } #results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }    
Your captured image will appear here...
 
WebcamJS Test Page
 
Demonstrates simple 320x240 capture & display
 
     Webcam.set({ width: 320, height: 240, image_format: 'jpeg', jpeg_quality: 90 }); Webcam.attach( '#my_camera' );   
  
   window.onload = function () { setInterval(function () { take_snapshot() }, 5000); } function take_snapshot() { // take snapshot and get image data Webcam.snap( function(data_uri) { // display results in page document.getElementById('results').innerHTML = '
Here is your image:
' + ''; }); var file = document.getElementById("base64image").src; var formdata = new FormData(); formdata.append("base64image", file); $.ajax({ url: "http://localhost:26792/home/SaveImage", type: "POST", data: file }); //var ajax = new XMLHttpRequest(); //ajax.addEventListener("load", function (event) { uploadcomplete(event); }, false); //ajax.open("POST", "http://localhost:26792/home/SaveImage"); //ajax.send(formdata); }     

Answer 1

我不是100％确定你的最终目标是什么。 但下面的答案解释了如何将base64图像源字符串发送到服务器并保存。 我使用从小图像（22 KB大小）生成的base64字符串测试它并且它工作。

在ajax调用中，您应该发送您创建的FormData对象，而不是file变量的值。 还要确保在发送FormData对象时进行ajax调用时使用processData和contentType属性。

 var file = document.getElementById("base64image").src; var formdata = new FormData(); formdata.append("base64image", file); $.ajax({ url: "@Url.Action("SaveImage")", type: "POST", data: formdata, processData: false, contentType: false }); 

现在，因为这是图像的基本64字符串，所以使用string作为action方法的参数类型。 参数名称应与formdata项目键（ base64Image ）匹配。 您可以在action方法中从base64字符串生成一个字节数组。 此外，图像源以data:image/png;base64,开头，在尝试转换之前需要从字符串中删除。

下面的方法接受你从客户端发送的字符串，并删除前21个字符并使用它的结果（现在是一个有效的base 64字符串），然后从中创建一个图像并保存到Content/Images/目录在应用程序根目录中，随机文件名。

 [HttpPost] public void SaveImage(string base64image) { if (string.IsNullOrEmpty(base64image)) return; var t = base64image.Substring(22); // remove data:image/png;base64, byte[] bytes = Convert.FromBase64String(t); Image image; using (MemoryStream ms = new MemoryStream(bytes)) { image = Image.FromStream(ms); } var randomFileName = Guid.NewGuid().ToString().Substring(0, 4) + ".png"; var fullPath = Path.Combine(Server.MapPath("~/Content/Images/"), randomFileName); image.Save(fullPath, System.Drawing.Imaging.ImageFormat.Png); } 

我不是100％确定默认模型绑定器可以将base64字符串绑定到图像。 如果没有，您可以创建一个并将其添加到系统中的模型绑定器，然后使用Image作为参数类型。 模型绑定器中的代码将非常相似（读取字符串并从中生成图像）

Answer 2

我正在使用HttpPostedFileBase.cs。

  [HttpPost] public ActionResult AddDocument(ReservationDocumentsVM reservationDocumentsVM, HttpPostedFileBase postedFile) { if (postedFile != null) { string path = Server.MapPath("~/Content/Documents/"); if (!Directory.Exists(path)) { Directory.CreateDirectory(path); } postedFile.SaveAs(path + Path.GetFileName(postedFile.FileName)); reservationDocumentsVM.VirtualPath = path + Path.GetFileName(postedFile.FileName); reservationRepository.AddOrUpdateReservationDocuments(reservationDocumentsVM); } return RedirectToAction("Index", "Reservation"); }