无法在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.Drawing.dll中发生类型'System.ArgumentException'的异常，但未在用户代码中处理

附加信息：参数无效。

堆栈跟踪

D：\\ B Braun中的Micraft.BBraun.Controllers.EmployeeController.FileUploadWithAjax（String imageString）的System.Drawing.Image.FromStream（Stream stream）的System.Drawing.Image.FromStream（Stream stream，Boolean useEmbeddedColorManagement，Boolean validateImageData） \\ mvc 2017年1月31日\\ Micraft.BBraun \\ Controllers \\ EmployeeController.cs：第351行位于lambda_method（Closure，ControllerBase，Object []），位于System.Web.Mvc.ActionMethodDispatcher。<> c__DisplayClass1.b__0（ControllerBase控制器，Object [] System.Web.Mvc.ActionMethodDispatcher.Execute（ControllerBase controller，Object []参数）在System.Web.Mvc.ReflectedActionDescriptor.Execute（ControllerContext controllerContext，IDictionary 2 parameters) at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethod(ControllerContext controllerContext, ActionDescriptor actionDescriptor, IDictionary System.Web.Mvc.Async.AsyncControllerActionInvoker.b__39（IAsyncResult asyncResult，ActionInvocation innerInvokeState）处的2 parameters) at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethod(ControllerContext controllerContext, ActionDescriptor actionDescriptor, IDictionary 2参数） System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult 2.CallEndDelegate(IAsyncResult asyncResult) at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResultBase 1.End（）在System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeActionResult（IAsyncResult a ），位于System.Web.Mvc.Async.AsyncControllerActionInvoker.AsyncInvocationWithFilters。<> c__DisplayClass46.b__3f（）处的System.Web.Mvc.Async.AsyncControllerActionInvoker.AsyncInvocationWithFilters.b__3d（）

UPDATE

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

当我从HTML的源代码中复制图像文本时，我能够在上述站点上生成图像。

之后，我尝试复制服务器端方法中获得的图像内容，但令人惊讶的是，我无法生成图像。

然后我比较了两个文本，发现了一些区别

如果您仔细检查波纹管图像，我会看到一些变化，例如图像内容中任何有“ +”号的地方，都用“空白”代替。

将数据发布到服务器时，我应该使用什么缺少的内容类型？

Answer 1

您需要在发送到服务器的数据上使用encodeURIComponent() 。 因此，在您的ajax请求中，执行以下操作：

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

参见AJAX POST和加号（+）-如何编码？