[Vue.js] 利用 HTML5 File api

這邊紀錄一下用 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;
        })
    }

完整程式碼：