转成blob 预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="inputFile" type="file" accept="image/*"> <img src="" id="previewImage" alt="图片预览"> <script> const $ = document.getElementById.bind(document); const $inputFile = $('inputFile'); const $previewImage = $('previewImage'); $inputFile.addEventListener('change', function(e) { const file = this.files[0]; console.log(e) console.log(file) $previewImage.src = file ? URL.createObjectURL(file) : ''; }, this); </script> </body> </html>
转换成base64预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="inputFile" type="file" accept="image/*"> <img src="" id="previewImage" alt="图片预览"> <script> const $ = document.getElementById.bind(document); const $inputFile = $('inputFile'); const $previewImage = $('previewImage'); $inputFile.addEventListener('change', function() { const file = this.files[0]; const reader = new FileReader(); console.log(reader) reader.addEventListener('load', function() { console.log(reader) $previewImage.src = reader.result; }, false); if(file) { reader.readAsDataURL(file); } }, false) </script> </body> </html>
图片转base64 (url 包含blob)
static imageToBase64(imgUrl) { return new Promise((resolve, reject) => { var imgFile = new FileReader(); imgFile.readAsDataURL(imgUrl); imgFile.onload = function () { var imgData = this.result; //base64数据 resolve(imgData) } }) }