【Vue.js】画像ファイルをBase64に変換してプレビューを表示する
初回投稿: 2021年06月04日 / 最終更新: 2021年06月07日
前書き
<input type="file">で選択した画像のプレビューをしたり、APIで画像を送信をしたい場合にBase64が使われることがあります。
Base64に変換するためには、FileReaderオブジェクトを使用します。
ほとんどのブラウザが対応しているのですぐに導入が可能です。
コード
画像をBase64に変更してプレビューを表示するところまでの実際のコード以下のようになります。
<template>
<div>
<input type="file" @change="imageToBase64">
<img :src="previewBase64">
</div>
</template>
<script>
export default {
data(){
return {
previewBase64: ''
}
},
methods: {
imageToBase64(event){
const reader = new FileReader()
// 選択されたファイルの取得
const file = event.target.files[0]
// ファイルが選択されていればBase64に変換する
if(file){
reader.readAsDataURL(file)
}else{
this.previewBase64 = ''
}
// 変換が終わったら実行される
reader.onload = () => {
this.previewBase64 = reader.result
}
}
},
}
</script>
readAsDataURLでBase64を変換しています。
また、変換したデータをimgタグのsrcに埋め込むことでプレビュー機能を実装しています。
まとめ
このように簡単にBase64に変換して扱うことができます。
このサイトで画像→Base64変換ツールをVue.jsで作成して公開していますので、ぜひ使ってみてください。