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)
　　}
}

　　

活着的目的不在于永远活着，而在于永远活出自己。

欢迎浏览博主站点：http://www.devloper.top/（有免费的教学视频、博客文章与在线工具）