直接上代码(我也是百度搜到的)
<template>
<div>
<input type="file" :value="fileValue" id="upImageFile" @change="ImageToBase64">
<img :src="iconBase64" alt="" width="200"/>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
iconBase64: '',
fileValue: ''
}
},
methods: {
ImageToBase64 () {
const files = document.getElementById('upImageFile').files[0]
console.log(files)
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>
效果图,可自行修改