比较简单,先从input中获取到File对象,然后通过FileReader将File读取为Base64,并将其赋值给img的src即可;
<script>
import { defineComponent, ref, toRef } from 'vue'
export default defineComponent({
setup() {
const picture = ref('');
const setPicture = (event) => {
const { files } = event.target;
const file = files?.length && files[0];
const reader = new FileReader();
reader.onload = () => P
picture.value = reader.result;
};
reader.readAsDataURL(file);
}
}
})
</script>
<template>
<input type="input" @change="setPicture"/>
<img v-if="picture" :src="picture"/>
</template>