选择本地图片作为<img/>的src

267 阅读1分钟

比较简单,先从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>