在Vue中(其他类似),如何将本地上传图片转化为Base64,并浏览。话不多说,直接上代码!

<template>
     <div>
        <input type="file" :value="fileValue" id="upImageFile" @change="ImageToBase64">
        <img :src="iconBase64" alt="" width="200"/>
        <button>上传</button>
     </div>
</template>

<script>
    export default{
        data(){
            return{
                fileValue: "",
                iconBase64: ""
            }
        }
        methods: {
            //将本地图片转化为Base64
            ImageToBase64() {
                let files = document.getElementById('upImageFile').files[0];
                var reader = new FileReader()
                reader.readAsDataURL(files)
                reader.onload = () => {
                    console.log('file 转 base64结果:' + reader.result)
                    this.iconBase64 = reader.result
                }
                reader.onerror = function (error) {
                    console.log('Error: ', error)
                }
            }
        }
    }
</script>    

 

 

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐