C# 使用FileReader.readAsDataUrl将图像上载到Web Api服务

我正在尝试使用FileReader获取图像的base-64表示形式，并将其提交给.NETWebAPI服务进行图像上载

我的问题是fileReader.result的内容作为base-64编码的图像是无效的，至少在.net中是这样

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

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

是剪切+粘贴到fiddler中对字符串做了一些我需要在这里解释的事情，还是有其他我没有正确做的事情？这看起来应该很简单：将图像编码为字符串，发送字符串，解码字符串，保存图像

例如，使用filereader在客户端上显示图像预览，我在filereader.result中获得以下结果：

src=“data:image/jpeg；base64，/9j/4aaqskzjrgabageayadiad/…oBUA00AqYL/AMCg3//Z”

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

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

因此，要么我得到一个错误，即filereader提供的整个字符串的长度无效，要么我对它进行破解，得到一个错误，即即使它是有效长度，它也不是有效图像（在读取bytearray时）。这就是为什么我想知道filereader.read和chrome中的开发工具之间是否存在翻译或格式问题，然后将其剪切和粘贴到fiddler中

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

似乎我是对的，当我触摸数据以剪切并粘贴filereader.result到服务调用中时，我或notepad++，或fiddler正在对数据执行某些操作

如果有人确切地知道这可能是什么，或者如何验证他们正在向服务发送图像的有效base-64编码，这可能会帮助将来尝试相同操作的其他人

同样，如果在浏览器filereader.result中生成“数据：图像/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);
    });

---

确保fiddler没有截断基64字符串

别忘了从dataUrl中删除“噪音”

例如在

data:image/png;base64,B64_DATA_HERE

您必须删除

数据：image/png；base64，

part在前面，因此您只处理base64部分

有了js，它将是

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

---

希望这有帮助。Cheers

数据uri不是base64编码字符串，它的末尾可能包含base64编码字符串。在本例中是这样的，因此您只需要发送base64编码的字符串部分

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

---

为什么要在发送之前对图像进行base64编码？为什么不以字节流的形式发送？@Darreller-我正在使用FileReader预览客户端的图像。对我来说，使用图像的viewmodel并将base-64表示作为该模型的多个属性之一更有意义，而不是提交一个文件数组，并且必须将每个文件与其在任何其他提交的数据（标题、说明等）中的补码相关联。我认为您需要在“base64”而不是“base64；”上拆分。和穆萨下面的回答一样。非常感谢你，你真的帮助了我！