將圖片轉為 Base64 格式
有時會遇到需要把圖片預覽或上傳的情境，這時將圖片轉為 Base64 格式是一個不錯的方案，這邊紀錄以 FileReader 實現該功能的簡易代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#img {
display: block;
margin-top: 8px;
}
</style>
</head>
<body>
<input id="file" type="file" />
<button id="button">轉換</button>
<img id="img" src="" />
<script>
const img = document.getElementById('img')
document.getElementById('button').addEventListener('click', () => {
const files = document.getElementById('file').files
if (files.length > 0) getBase64(files[0])
function getBase64(file) {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
img.src = reader.result
console.log(reader.result)
}
reader.onerror = (err) => {
console.log('Error: ', err)
}
}
})
</script>
</body>
</html>轉換完成後你能在 Console 面板看見或複製 Base64 的編碼。