将图片转base64编码,即将图片转化为一串字符串,该字符串可替代图片的地址。
<template>
<div>
<input type="file" id="id" name="image" accept="image/jpg, image/jpeg, image/png" @change="img()">
<!-- <div v-for="item in picPathList" :key="item.index">
<img :src="item.src" alt="" style="width:100px;height:100px">
</div> -->
<img :src="picPath" alt="" style="width:100px;height:100px">
</div>
</template>
export default {
data() {
return {
// picPathList:[],
picPath:"",
}
},
methods:{
img() {
let imgList;
let base64Img;
let file = document.getElementById("id").files[0]; //获取图片对象
let reader = new FileReader(); //实例化对象
reader.readAsDataURL(file) //将文件读取为DataURL
reader.onload = e => {
imgList = e.target.result
base64Img = imgList.split(',')[1] //imgList.split(',')[1]:为图片的Base64编码,base64url格式:'data:image/png;base64,'+ base64
this.picPath='data:image/png;base64,'+ base64Img
// this.picPathList.push({src:this.picPath})
}
},
}
}
需要在img标签中展示图片仅需将路径拼接为:‘data:image/png;base64,’+ base64该格式
效果展示:
补充:
代码中的这一部分我起初是这样写的:
这样会导致异步从而 2处的this.picPath将获取不到值