图片转base64编码并展示

将图片转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将获取不到值