在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>