图片以文件的形式存在，可以在表单中使用。
也可以转换成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等图片。
