vue 上傳圖片並回顯

<template>
  <div>
    <input class="file" name="file" type="file" accept="image/*" @change="updateFace" />
    <img :src="img" alt="">
  </div>
</template>

data() {
  return {
    img: ''
  };
}

 

第一種，轉成 base64碼

methods: {
  updateFace(e) {
    const file = e.target.files[0] || e.dataTransfer.files[0]
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload=()=>{
      this.img = reader.result
      console.log(reader.result,'地址')
    }
  }
}

 

第二種，轉成 blob地址

methods: {
  updateFace(e) {
    const file = e.target.files[0] || e.dataTransfer.files[0]
    let URL = window.URL || window.webkitURL; // 獲取當前域名地址
    this.img = URL.createObjectURL(file);   // 拼接 URL + file 並轉成 blob地址
  }
}