プロフィール画像登録時のファイルプレビューを実装してみます。
CDN読み込み
<body>
・・・
<!-- vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
view用意
<div id="file-preview">
<div class="form-group">
<label class="form-label" for="photo_id">プロフィール画像</label>
<input class="form-input" type="file" name="photo_id" accept="image/*" v-on:change="onFileChange">
</div>
<img class="userInfo__icon" v-bind:src="imageData" v-if="imageData">
</div>
v-on:change="onFileChange"
以下でjsに記述するonFileChangeメソッドを呼び出します。画像が登録されたら発火。
v-on:は@changeとして書けるようですが、省略せず書きたいと思います。
<img class="userInfo__icon" v-bind:src="imageData" v-if="imageData">
imageDataに画像が入って入れば表示。
js
<!-- vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#file-preview',
data: {
imageData: '' //画像格納用変数
},
methods: {
onFileChange(e) {
const files = e.target.files;
if(files.length > 0) {
const file = files[0];
const reader = new FileReader();
reader.onload = (e) => {
this.imageData = e.target.result;
};
reader.readAsDataURL(file);
}
}
}
});
</script>
</body>
el=element
data=viewへ渡す変数
methodsに先ほどviewで指定したonFileChangeを定義
fileが登録された段階でFileReaderの呼び出しとimageDataへ画像を格納し、viewにて表示
参考
たった2ステップ！Vue.js で選択画像をプレビューする方法（サンプルDL可）
FileReader.readAsDataURL() - Data URIとして読み込む