如何在 ASP.NET MVC 中将 base64String 转换为 blob 并通过 ajax 发送到控制器？

Posted 2023-03-22

【中文标题】如何在 ASP.NET MVC 中将 base64String 转换为 blob 并通过 ajax 发送到控制器？

【英文标题】：How to convert base64String to blob and send to controller via ajax in ASP.NET MVC?

【发布时间】：2021-07-19 16:40:33

【问题描述】：

我是 ajax 新手，目前我正在使用 ajax 尝试将 base64string 从视图发送到控制器并获得如下的 JsonResult：

$.ajax(
  url: "@Url.Action("UploadSignature", "JobList")",
  type: "POST",
  dataType: "json",
  data:  photoByte: base64String, eventRecordID: "123456" ,
  success: function (result) 
              if (result.success === true) 
                 alert("Signature uploaded !");
              
  ,
  error: function (XMLHttpRequest, textStatus, errorThrown) 
                  console.log(XMLHttpRequest);
         
  );

我的控制器方法如下：

[HttpPost]
    public async Task<ActionResult> UploadSignature(string photoByte, string eventRecordID)
    
         byte[] photoAfterConvert = Convert.FromBase64String(photoByte);
         ...             
         //Upload photoAfterConvert to server
         ...
         return Json(new  success = true );
    

但是，上面的代码有时不起作用，尤其是当 base64String 太长时。一旦我调用了 ajax，它就会挂起并且永远不会进入控制器方法。大约1分钟后，会触发错误回调函数，消息如下所示，无意义。

"readyState":0,"status":0,"statusText":"error"

因此，我在想有没有其他方法可以通过 ajax 将大字符串数据从视图发送到控制器？发送 blob 是一个不错的选择吗？如果是，我如何通过发送 blob 来实现它？我需要在控制器参数中放入什么数据类型才能接受 blob？

提前感谢您的帮助。

【参考方案1】：

试试这个：

function Base62ToBlob (dataURI) 
    'use strict'
    var byteString,
        mimestring

    if (dataURI.split(',')[0].indexOf('base64') !== -1) 
        byteString = atob(dataURI.split(',')[1])
     else 
        byteString = decodeURI(dataURI.split(',')[1])
    

    mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var content = new Array();
    for (var i = 0; i < byteString.length; i++) 
        content[i] = byteString.charCodeAt(i)
    

    return new Blob([new Uint8Array(content)],  type: mimestring );

从客户端调用操作方法：

function FileUploadServer (blob)    
    var fd = new FormData();
    fd.append("file", blob,  "FileName.png");
    $http.post("URL", fd, 
        headers:  'Content-Type': undefined 
    )
        .success(function (response, status, headers, config) 
          
          
        );

服务器端调用接收方法：

 public ContentResult Upload()
  
      var files = System.Web.HttpContext.Current.Request.Files;
      return CustJson( null);
   

【讨论】：

嗨@jayang pareek，感谢您提供的方法。我可以知道传递 blob 时应该在控制器中设置的数据类型是什么吗？还在用字符串吗？

不幸的是，ajax 调用仍然挂起并出现错误，还有其他选择吗？

您可以与我分享什么错误？你怎么打电话？

挂在那里2分钟后出现这个错误"readyState":0,"status":0,"statusText":"error"