废话不多说上代码
<template>
<div>
<input
type="file"
id="id"
name="image"
@change="shangc($event)"
accept="image/jpg, image/jpeg, image/png"
/>
<br/>
<img :src="picPath" alt="">
</div>
</template>
<script>
export default {
data() {
return {
data: "",
picPath:''
};
},
methods: {
shangc(e) {
let files = document.getElementById("id").files[0];
let reader = new FileReader();
let imgFile;
reader.readAsDataURL(files);
reader.onload = e => {
imgFile = e.target.result;
let arr = imgFile.split(",");
console.log(arr[1]);
this.picPath='data:image/png;base64,'+arr[1]
};
}
}
};
</script>
<style scoped>
img{
width: 400px;
height: 400px;
border: 1px solid red;
}
</style>