Vue 之 瀏覽本地圖片功能


 

template

<input type="file" ref="input_file" @change="fileChange" hidden>
<img :src="base64Img.join('')" alt=""> <!-- base64Img是個字節數組需要拼起來才能用 -->

 

script

data () {

  return {

    base64Img: []

  }

}



methods: {
  /* 由於無法獲取到圖片的絕對路徑,故只能將文件轉換后在顯示 */
  fileChange (e) {
    let file = e.target.files[0]
    let reader = new FileReader()
    reader.onload = value = > {
      this.base64Img.push(value.target.result)
    }
    reader.readAsDataURL(file)
  }
}

  

活着的目的不在於永遠活着,而在於永遠活出自己。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM