vue 中图片上传

<template>
  <div>
    <h1>展示的内容：{{ meg }}</h1>
    <input type="text" v-model="inputValue" @keyup.enter="fn" />
    <hr />
    <img width="200" :src="imgUrl" alt="" /><br />
    <input type="file" @change="changeImg" />
  </div>
</template>
<script>
// 需求1.将输入框里面的内容展示在h1标签内 按下enter键清空输入框
// 需求2.input框选择图片 且有预览
export default {
  data() {
    return {
      meg: "",
      inputValue: "",
      imgUrl: "",
    };
  },
  methods: {
    fn() {
      this.meg = this.inputValue;
      this.inputValue = "";
      console.log(this.inputValue);
    },
    changeImg(e) {
      // 创建一个本地预览URL.createObjectURL
      // 传入一个文件对象，获取一个本地可以访问的预览地址
      this.imgUrl = URL.createObjectURL(e.target.files[0]);
    },
  },
};
</script>
<style></style>