javascript 使用 FileReader.readAsDataUrl 上传图片到 Web Api 服务
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20962304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using FileReader.readAsDataUrl to upload image to Web Api service
提问by monkeydeus
I am trying to use the FileReader to obtain the base-64 representation of an image and submit that to a .net WebApi service for image uploading.
我正在尝试使用 FileReader 获取图像的 base-64 表示并将其提交给 .net WebApi 服务以上传图像。
My problem is that the contents of fileReader.result are not valid as a base-64 encoded image, at least according to .net.
我的问题是 fileReader.result 的内容作为 base-64 编码图像无效，至少根据 .net。
I am just using a very simple method, and testing with fiddler to post to the service. If I post the complete result string from filereader.result, I get an error "Invalid length for a Base-64 char array or string" when I try and read the string using FromBase64String.
我只是使用一种非常简单的方法，并使用 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");
}
}
Is cut+paste into fiddler doing something to the string that I need to account for here, or is there something else I am not doing correctly? This seems like it should be straightforward: Encode the image as a string, send the string, decode the string, save the image.
剪切+粘贴到 fiddler 中是否对我需要在此处说明的字符串执行了某些操作，或者还有其他一些我没有正确执行的操作吗？这看起来应该很简单：将图像编码为字符串，发送字符串，解码字符串，保存图像。
For example, using filereader to display a preview of the image on the client, I get the following in filereader.result:
例如，使用filereader在客户端显示图像的预览，我在filereader.result中得到以下内容：
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAyADIAAD/...oBUA00AqYL/AMCg3//Z"
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAyADIAAD/...oBUA00AqYL/AMCg3//Z"
I have tried both sending the entire string ("data...Z"), and just the Base64 string. Currently, I am splitting the string server side to get the Base64 string. Doing this, I always get the invalid length error.
我尝试过发送整个字符串（“data...Z”）和只发送 Base64 字符串。目前，我正在拆分字符串服务器端以获取 Base64 字符串。这样做，我总是得到无效长度错误。
Alternatively, I have tried sending just the base64 string. Not knowing if the leading / was actually part of the string or not, I deleted it in the post body. Doing THIS, I can actually read the value into a byte array, but then I get an error using Image.FromStream that the array is not a valid image.
或者，我尝试只发送 base64 字符串。不知道前导 / 是否实际上是字符串的一部分，我在帖子正文中将其删除。这样做，我实际上可以将值读入一个字节数组，但随后使用 Image.FromStream 出现错误，表明该数组不是有效图像。
So, either I get an error that the entire string as provided by filereader is an invalid length, or, I hack it up and get an error that even if it is a valid length, it is not a valid image (when reading the bytearray). That is what makes me wonder if there is some issue of translation or formatting between the filereader.read, dev tools in chrome, then cutting and pasting into fiddler.
所以，要么我得到一个错误，即 filereader 提供的整个字符串的长度无效，要么我修改它并得到一个错误，即使它是一个有效的长度，它也不是一个有效的图像（读取字节数组时） ）。这就是让我想知道 filereader.read、chrome 中的开发工具然后剪切并粘贴到 fiddler 之间是否存在翻译或格式问题的原因。
UPDATE:I tried a more realistic implementation by just taking the filereader.result and putting it in a $.post() call, and it works as expected.
更新：我尝试了一个更现实的实现，只需将 filereader.result 放入 $.post() 调用中，它就按预期工作。
It appears I was right, that I, or notepad++, or fiddler, are doing something to the data when I touch it to cut and paste filereader.result into a service call.
看来我是对的，当我触摸它以将 filereader.result 剪切并粘贴到服务调用中时，我或 notepad++ 或 fiddler 正在对数据执行某些操作。
If someone knows exactly what that might be, or how one can verify they are sending a valid base-64 encoding of an image to a service, it might help others who are attempting the same thing in the future.
如果有人确切地知道这可能是什么，或者如何验证他们正在向服务发送图像的有效 base-64 编码，它可能会帮助其他人在未来尝试同样的事情。
Again, if in the browser filereader.result yielded 'data:image/jpeg;base64,somestring', I was simply copying that string from the developer tools panel, creating a fiddler call and in the request body including the copied string: "=data:image/jpeg;base64,somestring". Somehow, the base-64 'somestring' was getting munched in the cut+paste.
同样，如果在浏览器中 filereader.result 产生“data:image/jpeg;base64,somestring”，我只是从开发人员工具面板复制该字符串，创建一个 fiddler 调用并在请求正文中包括复制的字符串：“=数据：图像/jpeg；base64，一些字符串”。不知何故，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);
});
回答by Edgar Villegas Alvarado
Don't forget to remove the 'noise' from a dataUrl,
不要忘记从 dataUrl 中删除“噪音”，
For example in
例如在
data:image/png;base64,B64_DATA_HERE
you have to remove the data:image/png;base64,part before, so you process only the base 64 portion.
您必须先移除该data:image/png;base64,部分，因此您只处理 base 64 部分。
With js, it would be
使用 js，它将是
var b64 = dataUrl.split("base64,")[1];
Hope this helps. Cheers
希望这可以帮助。干杯
回答by Musa
A data uri is not a base64 encode string, it may contain a base64 encoded string at the end of it. In this case it does, so you need to only send the base64 encoded string part.
数据 uri 不是 base64 编码字符串，它可能在其末尾包含一个 base64 编码字符串。在这种情况下确实如此，因此您只需要发送 base64 编码的字符串部分。
var imagestr = datauri.split(',')[1];
sendToWebService(imagestr);
回答by Leo
Make sure fiddler is not truncating the Base 64 String
确保提琴手没有截断 Base 64 字符串
