前端例程：文件转 DataURI Base64 数据工具
Posted Naisu Xu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端例程：文件转 DataURI Base64 数据工具相关的知识，希望对你有一定的参考价值。
目的
在做网页开发 的时候经常会把一些较小的图片、图标等直接以文本数据的方式直接嵌入在代码中，以减少同一个页面上内容的请求次数。通常的做法时将这些文件转换成 DataURI Base64 格式数据嵌入到代码中。
功能演示
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件转 DataURI Base64 数据工具</title>
<script>
var data = "";
function read(file) {
var reader = new FileReader();
reader.onload = function () {
data = this.result; // 获取数据
document.getElementById("show").value = data;
};
reader.readAsDataURL(file); // 以DataURI Base64方式读取
}
function copy() {
navigator.clipboard.writeText(data).then(function () {
alert("复制成功！");
}, function () {
alert("复制失败！");
});
}
</script>
</head>
<body>
<input type="file" onchange="read(this.files[0])" /><br>
<textarea id="show" style="overflow-y: scroll; width: 30rem; height: 15rem;"></textarea><br>
<button onclick="copy()">复制到剪贴板</button>
</body>
</html>
总结
工具比较简单，就只是在读取文件时以DataURL形式读取而已。
以上是关于前端例程：文件转 DataURI Base64 数据工具的主要内容，如果未能解决你的问题，请参考以下文章