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を（ストリームstream）でSystem.Drawing.Image.FromStreamを（ストリームstream、ブール useEmbeddedColorManagement、ブールvalidateImageData）で

スタックトレース

\ Micraft.BBraun.Controlers.EmployeeController.FileUploadWithAjax（String imageString）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。 < System.Web.Mvc.ReflectedActionDescriptor.Execute（ControllerContext で> c__DisplayClass1.b__0（ControllerBase コントローラ、[]パラメータを物体） System.Web.Mvc.ActionMethodDispatcher.Execute（ControllerBase コントローラ、オブジェクト[]パラメータ）でcontrollerContext、IDictionaryを 2.CallEndDelegate(IAsyncResult asyncResult) at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResultBase System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult 1.End（） ATでSystem.Web.Mvc.Async.AsyncControllerActionInvoker.b__39（たIAsyncResult asyncResult、ActionInvocation innerInvokeState）でパラメータ） System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeActionMethod（IAsyncResul System.Web.Mvc.Async.AsyncControllerActionInvoker.AsyncInvocationWithFiltersで System.Web.Mvc.Async.AsyncControllerActionInvoker.AsyncInvocationWithFilters.b__3d（） でT asyncResult）。 <> c__DisplayClass46.b__3f（）

UPDATE

私はちょうど私がHTMLでそのソースからの画像テキストをコピーするとき http://codebeautify.org/base64-to-image-converter

ようbase64stringから画像を生成することができるオンラインツールをチェックしていました、私は上記のサイトでImageを生成することができました。

その後、サーバー側の方法で取得していた画像コンテンツをコピーしようとしましたが、驚くほど画像を生成できませんでした。

は、その後、私は両方のテキストを比較し、あなたは慎重に怒鳴る画像を確認した場合、私はそのは「空白」に置き換え、画像コンテンツ内の任意の「+」記号がありますどこのようないくつかの変更を見ることができるいくつかのdiferencesに

を見つけました。

このデータをサーバーに送信する際に使用する必要があるコンテンツタイプはありますか？

Answer 1

は、サーバーに送信されたデータにencodeURIComponent()を使用する必要があります。

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

は、その作業罰金、感謝の男素晴らしいですAJAX POST and Plus Sign (+) -- How to Encode?