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