获取图片的base64编码

1.使用input标签来选择图片

  <input id="input" type="file">请选择图片</input>

 2.创建一个img标签和按钮标签，image标签未设置src

 <button id="btn" @click="btn1">点击渲染图片</button>

 <img id="img" src="">

 3.实现点击按钮，拿到base64编码，渲染图片

        // 获取元素
        let input = document.querySelector('#input')
        let btn = document.querySelector('#btn')
        let img = document.querySelector('#img')
        // 点击按钮渲染图片
        btn.addEventListener('click', () => {
            const file = input.files[0]
            console.log(file);
            // 这里使用 FileReader来获取图片的base64编码
            const reader = new FileReader()
            reader.onload = () => {
                // 打印图片的base64编码
                console.log(reader.result);
                // 把base64编码赋值给图片的src
                img.src = reader.result
            }
            reader.readAsDataURL(file)
        })