無法在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?