JavaScript 图片预览：使用 FileReader 和 Promise 将图片转换为 Base64 编码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>WebCat</title>
<style>
#preview{
max-width:80%;
}
</style>
</head>
<body>
<input type="file" />
<img src="" id="preview" alt=""/>
<script>
function BASE64(file){
return new Promise((resolve, reject) => {
var reader = new FileReader();
reader.onload = (e) =>{
resolve(e.target.result);
}
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
var inp = document.querySelector("input");
inp.onchange = async function(){
preview.src = await BASE64(inp.files[0]);
}
</script>
</body>
</html>这段代码展示了如何使用 JavaScript 中的 FileReader 和 Promise 来实现图片预览功能。首先，代码定义了一个名为 BASE64 的函数，该函数接收一个文件作为参数，并返回一个 Promise 对象。Promise 对象表示异步操作的结果，即文件读取完成后返回的 Base64 编码字符串。在 BASE64 函数内部，创建了一个 FileReader 对象，并使用它的 readAsDataURL 方法来读取文件。读取完成后，FileReader 对象的 onload 事件会触发，并将读取到的 Base64 编码字符串作为参数传递给 Promise 对象的 resolve 方法。如果读取过程中发生错误，则会触发 onerror 事件，并将其传递给 Promise 对象的 reject 方法。在 main 函数中，使用 document.querySelector 方法获取到 input 元素，并添加 onchange 事件监听器。当用户选择文件时，onchange 事件会触发，并调用 BASE64 函数将文件转换成 Base64 编码。由于 BASE64 函数返回的是一个 Promise 对象，因此需要使用 async/await 语法来等待 Promise 对象执行完成。最后，将 Base64 编码字符串设置为 preview 元素的 src 属性，就可以在页面上显示图片了。
原文地址: https://www.cveoy.top/t/topic/qeYH 著作权归作者所有。请勿转载和采集!