图片上传时预览

<template>
 div> 
<input type="file" accept="image/*" @change="onFileSelect">
 <div v-if="previewUrl"> <img :src="previewUrl" alt="preview">
 </div> 
</div> 
</template> 

JavaScript 代码：

export default {
  data() {
    return {
      selectedFile: null,
      previewUrl: null
    }
  },
  methods: {
    onFileSelect(event) {
      this.selectedFile = event.target.files[0];
      this.preview();
    },
    preview() {
      if (!this.selectedFile) {
        return;
      }
      const reader = new FileReader();
      reader.readAsDataURL(this.selectedFile);
      reader.onload = (event) => {
        this.previewUrl = event.target.result;
      }
    }
  }
}

在这个示例中，我们使用 input 元素的 type 属性设置为 file 并使用 accept 属性来仅允许选择图片文件。当用户选择文件时，我们使用 @change 监听事件来处理文件选中事件。在 onFileSelect 方法中，我们将选中的文件存储在 selectedFile 变量中，并调用 preview 方法来预览选中的文件。

在 preview 方法中，我们首先检查 selectedFile 是否存在。如果不存在，则返回。否则，我们创建一个新的 FileReader 对象，并使用 readAsDataURL() 方法读取 selectedFile 中的数据。一旦读取完成，我们在 onload 回调中设置 previewUrl 变量为 FileReader 的结果，这是一个 base64 编码的字符串，它可以直接用作 <img> 标签的 src 属性。

请注意，在此示例中，我们使用 v-if 指令来检查 previewUrl 是否存在，并在界面上显示图片预览。