vue实现图片预览

在 Vue 中实现图片预览功能，通常涉及监听文件输入的变化，并在用户选择文件后，使用 FileReader API 来读取文件内容，然后显示这个内容作为图片的预览。以下是一个简单的 Vue 组件示例，它实现了图片预览功能：

<template>
  <div>
    <input type="file" accept="image/*" capture="camera" @change="onFileChange">
    <img v-if="imageUrl" :src="imageUrl" alt="Image Preview">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    onFileChange(e) {
      const files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.createImage(files[0]);
    },
    createImage(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        this.imageUrl = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
};
</script>

在这个例子中：

我们创建了一个 input 元素，其类型为 file，并设置 accept 属性为 image/* 来限制用户只能选择图片文件。
当用户选择文件后，@change 事件被触发，调用 onFileChange 方法。
在 onFileChange 方法中，我们从事件对象 e 中获取用户选择的文件列表，并检查是否有文件被选中。
调用 createImage 方法来处理选定的文件。
在 createImage 方法中，我们使用 FileReader 对象来读取文件。当读取完成后，onload 事件被触发，我们从事件对象 e 中获取读取的结果，并将其设置为 imageUrl。
在模板中，我们使用 v-if 指令来检查 imageUrl 是否存在，如果存在，则使用 img 标签显示图片预览。