vue实现文件预览功能

// Vue 实现文件预览功能示例代码

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <div v-if="previewUrl">
      <img v-if="isImage" :src="previewUrl" alt="Preview" />
      <embed v-else :src="previewUrl" type="application/pdf" width="100%" height="600px" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: null,
      isImage: false
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.isImage = file.type.startsWith('image/');
        this.previewUrl = URL.createObjectURL(file);
      }
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 包含一个文件输入框 (<input type="file">) 和一个用于显示预览的 <div>。
   • 当用户选择文件时，触发 handleFileChange 方法。
   • 如果有预览 URL，则根据文件类型显示图片或 PDF 文件。

2. 脚本部分 (<script>):

   • 定义了两个数据属性：previewUrl 用于存储文件的预览 URL，isImage 用于判断是否为图片文件。
   • handleFileChange 方法：
     • 获取用户选择的文件。
     • 检查文件类型是否为图片，并设置 isImage。
     • 使用 URL.createObjectURL 创建文件的临时 URL 并赋值给 previewUrl。

3. 样式部分 (<style scoped>):

   • 可以根据需要添加自定义样式，这里没有具体样式，可以根据实际需求进行调整。