Question

我正在尝试使用FileReader获取图像的base-64表示，并将其提交给.net WebApi服务以进行图像上传。

我的问题是fileReader.result的内容无法作为base-64编码的图像，至少根据.net。

我只是使用一种非常简单的方法，并使用fiddler进行测试以发布到服务中。如果我从filereader.result发布完整的结果字符串，当我尝试使用FromBase64String读取字符串时，我收到错误“Base-64 char数组或字符串的长度无效”。

public void Post([FromBody]string imgString)
    {
        var myString = imgString.Split(new char[]{','});
        byte[] bytes = Convert.FromBase64String(myString[1]);
        using (MemoryStream ms = new MemoryStream(bytes))
        {
            Image image = Image.FromStream(ms);
            image.Save("myBlargyImage.jpg");
        }
    }

切割+粘贴到小提琴手做一些我需要在这里考虑的字符串，或者还有其他我没做错的事情吗？这似乎应该是直截了当的：将图像编码为字符串，发送字符串，解码字符串，保存图像。

例如，使用filereader在客户端上显示图像的预览，我在filereader.result中得到以下内容：

SRC = “数据：图像/ JPEG; BASE64，/ 9J / 4AAQSkZJRgABAgEAyADIAAD / ... oBUA00AqYL / AMCg3 // Z”

我已尝试发送整个字符串（“data ... Z”），只发送Base64字符串。目前，我正在拆分字符串服务器端以获取Base64字符串。这样做，我总是得到无效长度错误。

或者，我尝试过只发送base64字符串。不知道领先/是否实际上是字符串的一部分，我在帖子正文中删除了它。这样做，我实际上可以将值读入字节数组，但是使用Image.FromStream我得到一个错误，即该数组不是有效的图像。

所以，我得到一个错误，即filereader提供的整个字符串是一个无效的长度，或者，我修改它并得到一个错误，即使它是一个有效的长度，它也不是一个有效的图像（当阅读bytearray）。这就是让我想知道在filereader.read，chrome中的dev工具，然后剪切和粘贴到fiddler之间是否存在翻译或格式化问题。

更新我尝试了一个更现实的实现，只需将filereader.result放入$ .post（）调用中，它就可以正常工作了。

看来我是对的，当我触摸它以将filereader.result剪切并粘贴到服务调用中时，我或者记事本++或者fiddler正在对数据执行某些操作。

如果有人确切知道可能是什么，或者如何验证他们是否正在向服务发送有效的图像base-64编码，那么它可能会帮助将来尝试同样事情的其他人。

同样，如果在浏览器filereader.result中产生'data：image / jpeg; base64，somestring'，我只是从开发人员工具面板复制该字符串，创建一个fiddler调用并在请求正文中包含复制的字符串：“= data：image / jpeg; base64，somestring”。不知何故，base-64'somestring'在剪切+粘贴中被碾碎。

function readURL(input) {

        if (input.files && input.files[0]) {
            reader = new FileReader();

            reader.onload = function (e) {
                $('#imgPreview').attr('src', e.target.result);
                $.post('/api/testy/t/4',
                    {'':e.target.result}
                );
            };

            reader.readAsDataURL(input.files[0]);
            reader.onloadend = function (e) {
                console.log(e.target.result);
            };
        }
    }

    $("#imgUpload").change(function () {
        readURL(this);
    });

Answer 1

不要忘记从dataUrl中删除'noise'，

例如在

中

data:image/png;base64,B64_DATA_HERE

您之前必须删除data:image/png;base64,部分，因此您只处理基础64部分。

使用js，它将是

var b64 = dataUrl.split("base64,")[1];

希望这会有所帮助。干杯

Answer 2

数据uri不是base64编码字符串，它可能包含一个base64编码的字符串。在这种情况下，它只需要发送base64编码的字符串部分。

var imagestr = datauri.split(',')[1];
sendToWebService(imagestr);

Answer 3

确保fiddler没有截断Base 64 String

使用FileReader.readAsDataUrl将图像上传到Web Api服务

3 个答案: