yoe-opm-web/src/components/FileSelector

FileSelector 文件选择器组件

基于现有文件管理界面功能开发的公共文件选择器组件，支持从已有文件中选择或上传新文件。

功能特性

• 🗂️ 多文件类型支持: 图片、视频、音频、文档等多种文件类型
• 📁 分类管理: 支持文件分类和子分类选择
• 🔍 搜索功能: 支持文件名搜索
• 📱 双视图模式: 网格视图和列表视图切换
• ✅ 多选/单选: 可配置单选或多选模式
• ⬆️ 上传功能: 支持直接上传新文件
• 🎨 响应式设计: 适配不同屏幕尺寸

使用方法

基础用法

<template>
  <div>
    <el-button @click="showSelector = true">选择文件</el-button>
    
    <FileSelector
      v-model="showSelector"
      :allowed-types="[1]"
      :multiple="false"
      @confirm="handleFileSelected"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import FileSelector from '@/components/FileSelector/index.vue';

const showSelector = ref(false);

const handleFileSelected = (files) => {
  console.log('选择的文件:', files);
};
</script>

高级用法

<template>
  <FileSelector
    v-model="visible"
    :allowed-types="[1, 2]"
    :multiple="true"
    :allow-upload="true"
    title="选择课程资源"
    @confirm="onConfirm"
  />
</template>

<script setup>
import { ref } from 'vue';
import FileSelector from '@/components/FileSelector/index.vue';

const visible = ref(false);

const onConfirm = (selectedFiles) => {
  // 处理选择的文件
  selectedFiles.forEach(file => {
    console.log('文件信息:', {
      id: file.id,
      name: file.name,
      url: file.url,
      size: file.size,
      type: file.type
    });
  });
};
</script>

Props 属性

属性名	类型	默认值	说明
modelValue	boolean	false	控制对话框显示/隐藏
allowedTypes	number[]	[1]	允许的文件类型数组
multiple	boolean	false	是否允许多选
allowUpload	boolean	true	是否允许上传新文件
title	string	'选择文件'	对话框标题

文件类型说明

类型值	文件类型	支持的扩展名
1	图片文件	jpg, jpeg, png, gif, bmp, webp
2	视频文件	mp4, avi, mov, wmv, flv, mkv
3	音频文件	mp3, wav, flac, aac, ogg
4	文档文件	pdf, doc, docx, xls, xlsx, ppt, pptx, txt

Events 事件

事件名	参数	说明
update:modelValue	boolean	对话框显示状态改变时触发
confirm	File[]	确认选择文件时触发，返回选中的文件数组

使用场景示例

1. 课程封面选择（单选图片）

<FileSelector
  v-model="showCoverSelector"
  :allowed-types="[1]"
  :multiple="false"
  title="选择课程封面"
  @confirm="handleCoverSelected"
/>

2. 课程视频选择（多选视频）

<FileSelector
  v-model="showVideoSelector"
  :allowed-types="[2]"
  :multiple="true"
  title="选择课程视频"
  @confirm="handleVideosSelected"
/>

3. 教学资料选择（多选文档）

<FileSelector
  v-model="showMaterialSelector"
  :allowed-types="[4]"
  :multiple="true"
  title="选择教学资料"
  @confirm="handleMaterialsSelected"
/>

4. 混合媒体选择（图片+视频）

<FileSelector
  v-model="showMediaSelector"
  :allowed-types="[1, 2]"
  :multiple="true"
  title="选择媒体文件"
  @confirm="handleMediaSelected"
/>

完整示例

参考 example.vue 文件，展示了在课程管理表单中的完整使用示例，包括：

• 课程封面选择（单选图片）
• 课程视频选择（多选视频）
• 教学资料选择（多选文档）
• 文件删除和重新选择功能

注意事项

1. 文件类型限制: 组件会根据 allowedTypes 自动过滤和验证文件类型
2. 上传限制: 单个文件大小限制为 50MB
3. 分类依赖: 组件依赖文件分类API，确保后端分类数据正确
4. 权限控制: 确保用户有访问文件管理的权限
5. 样式覆盖: 如需自定义样式，可以通过CSS覆盖组件样式

依赖要求

• Vue 3.x
• Element Plus
• 文件管理相关API (@/api/file/info, @/api/file/category)
• 认证工具 (@/utils/request, @/utils/auth)

更新日志

v1.0.0

• 初始版本发布
• 支持基础文件选择功能
• 支持文件上传功能
• 支持多种文件类型
• 支持单选/多选模式