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)
})