Vue.js图片转base64 原生也可以使用此方法

今天给大家介绍一下图片转base64的方法。直接上代码。

    <template>
        <div>
            <img :src="imgs"  @click='upimg' alt="" />
            <input type="file" 
                class="inputs" ref="upFile"    
                @change="file()" 
                style="display:none" >
           
        </div>
    </template>

<script>
export default {
    data(){
        return{
            imgs:'',
        }
    },
    methods:{
        upimg(){
            const input = document.querySelector('inputs');
            input.click();
        },
        file(){
            let file = this.$refs.upFile.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file); 
            reader.onload = (e) => {
                this.imgs = e.target.result
                console.log(this.imgs,'111111')

            };
        }
    }
    
}
</script>

我们需要隐藏input，切记是隐藏而不是删除，因为两者区别还是很大的。然后我们使用 js的动态获取获取到class为inputs的input标签，再给她一个点击事件来触发这个input。 input的type需要为file才能提交文件，我这只是我刚好用到了 点击图片上传的功能所以才这么写 具体写法根据需求。