這邊紀錄一下用 Vue.js 使用 HTML5 File api 的方法，首先先準備 html。
<div id="app">
<input type="file" >
<div>
<img src="img" alt="">
</div>
</div>Vue.js 的部分我使用 Vue3.x 版：
const app={
data(){
return{
img: null
}
},
methods: {
}
}
Vue.createApp(app).mount('#app')
在 input 的地方綁定 change 事件，並且讓圖片在 img 有值的時候才出現，並抓取選取的照片的內容：
<input type="file" @change="fileChange">
<div>
<img v-if="img" :src="img" alt="">
</div>
js 的部分：
fileChange(e){
let fileData=e.target.files[0]
let reader = new FileReader();
reader.readAsDataURL(fileData);
reader.addEventListener("load",(event)=>{
this.img=event.target.result;
})
}
完整程式碼：
![[Vue.js] v-for 與列表](/assets/upload/1583563899683_0.jpg)
![[Alpine.js] 指示詞 (Directive)應用之一](/assets/upload/1619937404772_0.jpg)
![[chart.js] 使用 chart.js 繪製漂亮的圖表- 基本安裝與設置](/assets/upload/1618313148197_0.jpg)
