Vue+ElementUI实现文件照片音频视频预览

在Vue项目中使用ElementUI实现文件（照片、音频、视频）预览，可以通过el-image组件来显示图片，使用el-video组件来显示视频，使用el-audio组件来显示音频。以下是一个简单的示例：

<template>
  <div>
    <el-image
      style="width: 100px; height: 100px"
      :src="filePreviewUrl"
      fit="fill"></el-image>
    <!-- 视频预览 -->
    <el-video
      v-if="isVideo"
      :src="filePreviewUrl"
      :autoplay="true"
      :controls="true"></el-video>
    <!-- 音频预览 -->
    <el-audio
      v-if="isAudio"
      :src="filePreviewUrl"
      :autoplay="false"
      :controls="true"></el-audio>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      filePreviewUrl: '', // 文件预览URL
      isVideo: false, // 是否为视频文件
      isAudio: false, // 是否为音频文件
    };
  },
  methods: {
    // 文件类型判断和URL设置
    setFilePreview(fileUrl) {
      const fileType = fileUrl.substring(fileUrl.lastIndexOf('.') + 1);
      if (['jpg', 'jpeg', 'png', 'gif'].includes(fileType)) {
        this.filePreviewUrl = fileUrl;
        this.isVideo = false;
        this.isAudio = false;
      } else if (['mp4', 'webm', 'ogg'].includes(fileType)) {
        this.filePreviewUrl = fileUrl;
        this.isVideo = true;
        this.isAudio = false;
      } else if (['mp3', 'wav', 'ogg'].includes(fileType)) {
        this.filePreviewUrl = fileUrl;
        this.isVideo = false;
        this.isAudio = true;
      } else {
        // 其他文件类型处理
      }
    },
  },
};
</script>

在这个示例中，我们定义了一个setFilePreview方法来判断文件类型，并设置对应的预览URL和标志位。然后在模板中根据文件类型和标志位来决定使用el-image、el-video还是el-audio组件来进行预览。

注意：实际应用中需要处理文件预览的安全性问题，比如限制文件类型、大小，以及对预览的文件进行权限校验等。