前端将图片转换为base64位无法使用ajax传递怎么解决?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端将图片转换为base64位无法使用ajax传递怎么解决?相关的知识，希望对你有一定的参考价值。
参考技术A前端生成的代码最终格式如下：
data:image/png;base64,xxxxxxxxxx...........
后端这样解码
base64=base64.Replace("data:image/png;base64,", "");
byte[] bytes =Convert.FromBase64String(base64);
MemoryStream memStream = new MemoryStream(bytes);
BinaryFormatter binFormatter = new BinaryFormatter;
return(System.Drawing.Image)binFormatter.Deserialize(memStream);
string base64Str = "图片的BASE64字符串";
byte[] bytes = System.Convert.FromBase64String(base64Str);
using (System.IO.MemoryStream ms = new System.IO.MemoryStream(bytes))
return System.Drawing.Image.FromStream(ms);
ajax(,url : form.action,,type : "POST",,data : formData,
dataType:"text",,processData : false,,success:function(data).window.location.href="$ctx"+data;
xhr:function//在jquery函数中直接使用ajax的XMLHttpRequest对象
var xhr = new XMLHttpRequest
xhr.upload.addEventListener
将图片转换为Base64编码的字符串
图片以文件的形式存在，可以在表单中使用。
也可以转换成Base64编码的字符串，从而在css、js中以字符串的形式使用图片。例如，在css中设置背景图片、在js中用ajax上传图片。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <h2>图片转Base64</h2> <input type="file" id="uploadFile" onchange="getDataUrl(event);"/> <img id="myImg" width="16" height="16"/> <script> let getDataUrl = (e)=>{ // 获取图片 let file = document.getElementById(\'uploadFile\').files[0]; // 检测图片 if(!/image\\/w+/.test(file.type)){ alert(\'请上传图片\'); return; } // 转换图片 let fileReader = new FileReader(); fileReader.onload = ()=>{ console.log(fileReader.result); document.querySelector(\'#myImg\').src = fileReader.result; } fileReader.readAsDataURL(); } </script> </body> </html>
各种图片在线转换Base64的网站，就是使用这种方法来转换jpg、png、ico等图片。
以上是关于前端将图片转换为base64位无法使用ajax传递怎么解决?的主要内容，如果未能解决你的问题，请参考以下文章
30Android 将本地图片转换为Base64加密字符串及根据加密串反向生成图片