无法在 MVC 操作方法中从 base64 字符串创建图像

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");
            }
        }

但是从流创建图像时出现问题。它抛出一个名为 "Invalid parameter".

的错误

An exception of type 'System.ArgumentException' occurred in System.Drawing.dll but was not handled in user code

Additional information: Parameter is not valid.

堆栈跟踪

at System.Drawing.Image.FromStream(Stream stream, Boolean useEmbeddedColorManagement, Boolean validateImageData) at System.Drawing.Image.FromStream(Stream stream) at Micraft.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 , ControllerBase , Object[] ) at System.Web.Mvc.ActionMethodDispatcher.<>c__DisplayClass1.b__0(ControllerBase controller, Object[] parameters) at System.Web.Mvc.ActionMethodDispatcher.Execute(ControllerBase controller, Object[] parameters) at System.Web.Mvc.ReflectedActionDescriptor.Execute(ControllerContext controllerContext, IDictionary2 parameters) at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethod(ControllerContext controllerContext, ActionDescriptor actionDescriptor, IDictionary2 parameters) at System.Web.Mvc.Async.AsyncControllerActionInvoker.b__39(IAsyncResult asyncResult, ActionInvocation innerInvokeState) at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult2.CallEndDelegate(IAsyncResult asyncResult) at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResultBase1.End() at System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeActionMethod(IAsyncResult asyncResult) at System.Web.Mvc.Async.AsyncControllerActionInvoker.AsyncInvocationWithFilters.b__3d() at System.Web.Mvc.Async.AsyncControllerActionInvoker.AsyncInvocationWithFilters.<>c__DisplayClass46.b__3f()

更新

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

当我从 html 中的来源复制图像文本时，我能够在上面的站点上生成图像。

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

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

如果你仔细检查下面的图片，我可以看到一些变化，比如图片内容中有任何“+”符号的地方，它被替换为 "blank space"。

在将此数据发布到服务器时，我是否应该使用缺少任何内容类型？

Answer 1

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

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

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

无法在 MVC 操作方法中从 base64 字符串创建图像

Not able to create image from base64string on MVC action method

c#

asp.net-mvc

image-uploading

filereader