无法在MVC操作方法上从base64string创建图像

Question

我试图通过其内容在MVC控制器中上传图像。

$scope.imageUpload = function (event) { 
     var files = event.target.files; //FileList object 
     fileString = event.target.files[0]; 
     for (var i = 0; i < files.length; i++) { 
      var file = files[i]; 
      var reader = new FileReader(); 
      reader.onload = $scope.imageIsLoaded; 
      reader.readAsDataURL(file); 
     } 
    } 
    $scope.imageIsLoaded = function (e) { 
     $scope.$apply(function() { 
      $scope.userProfilePic = e.target.result; 
      $.ajax({ 
       url: "FileUploadWithAjax", 
       type: "POST", 
       data: 'imageString=' + e.target.result.split(',')[1], 
       processData: false 
      }); 
     }); 
    } 

一旦图像加载，我发送它的内容到MVC控制器。

[System.Web.Mvc.HttpPost] 
     public void FileUploadWithAjax([FromBody]string imageString) 
     { 
      bytes = Convert.FromBase64String(imageString); 
      using (MemoryStream ms = new MemoryStream(bytes)) 
      { 
       Image image = Image.FromStream(ms); 
       image.Save("myBlargyImage.jpg"); 
      } 
     } 

但是，它从流中创建图像时破坏了。它引发了一个名为“无效参数”的错误。

类型“System.ArgumentException”的异常出现在 System.Drawing.dll程序但在用户代码中没有处理

其他信息：参数是无效的。

堆栈跟踪

在System.Drawing.Image.FromStream（流流，布尔 useEmbeddedColorManagement，布尔validateImageData）在 System.Drawing.Image.FromStream（流流）在 Micral.BBraun.Controllers.EmployeeController.FileUploadWithAjax（String imageString）in D：\ B Braun \ mvc 31 JAN 2017 \ Micraft.BBraun \ Controllers \ EmployeeController.cs：line 351 at lambda_method（Closure，Controlle rBase，Object []）在 System.Web.Mvc.ActionMethodDispatcher。 <> c__DisplayClass1.b__0（ControllerBase 控制器，对象[]参数）在 System.Web.Mvc.ActionMethodDispatcher.Execute在 System.Web.Mvc.ReflectedActionDescriptor.Execute（ControllerContext （ControllerBase 控制器，对象[]参数） controllerContext，IDictionary的参数）在 System.Web.Mvc.Async.AsyncControllerActionInvoker.b__39（IAsyncResult的 asyncResult，ActionInvocation innerInvokeState）在 System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult 2.CallEndDelegate(IAsyncResult asyncResult) at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResultBase 1.End（） 在 System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeActionMethod（IAsyncResul吨 asyncResult）在 System.Web.Mvc.Async.AsyncControllerActionInvoker.AsyncInvocationWithFilters.b__3d（） 在 System.Web.Mvc.Async.AsyncControllerActionInvoker.AsyncInvocationWithFilters。 <> c__DisplayClass46.b__3f（）

UPDATE

我只是检查的在线工具，它可以从base64string像 http://codebeautify.org/base64-to-image-converter

当我从它的来源在HTML复制图像文本生成图像，我能够在上面的网站上生成图像。

之后，我试图复制图像内容，我是让我的服务器端方法和令人惊讶的我是不是能够产生图像。

然后我比较两种文本，并发现了一些个体差异

如果你仔细检查波纹管的形象，我可以看到这样只要有丰富的图像内容有任何“+”号的一些变化，它与“空白空间”所取代。

是否有任何内容类型我错过了，我应该使用这些数据发布到服务器？

Answer 1

您需要使用上向服务器发送数据encodeURIComponent()。所以，在你的Ajax请求，请执行以下操作：

data: 'imageString=' + encodeURIComponent(e.target.result.split(',')[1]), 

见AJAX POST and Plus Sign (+) -- How to Encode?