文件选择器组件

概述

FileSelector 是一个功能完整的文件上传和选择组件，支持拖拽上传、多文件上传、文件预览、下载等功能，并可从最近上传的文件中快速选择。

组件路径：web/apps/web-ele/src/components/zq-form/file-selector/

组件名称：FileSelector

功能特性

• 文件上传：支持点击选择和拖拽上传
• 多文件支持：单选/多选模式
• 上传进度：实时显示上传进度
• 文件预览：图片预览、文档预览
• 文件下载：支持下载已上传文件
• 最近文件：快速选择最近上传的文件
• 文件类型限制：支持限制可上传的文件类型
• 文件大小限制：支持限制文件大小

Props

属性	类型	默认值	说明
modelValue	string | string[]	-	文件 ID
multiple	boolean	false	是否多选
placeholder	string	'请选择'	占位符
disabled	boolean	false	是否禁用
clearable	boolean	true	是否可清除
showSize	boolean	true	是否显示文件大小
showIcon	boolean	true	是否显示文件图标
maxSize	number	100	最大文件大小（MB）
accept	string[]	-	接受的文件类型
displayMode	'list' | 'popover'	'list'	显示模式
trigger	'default' | 'button'	'default'	触发器类型
source	string	'form'	文件来源标识

Events

事件	参数	说明
update:modelValue	string | string[] | undefined	值更新
change	string | string[] | undefined	值变化

Expose 方法

方法	说明
openModal()	打开文件选择弹窗

使用示例

单文件上传

<template>
  <FileSelector v-model="fileId" placeholder="请选择文件" />
</template>

<script setup>
import { ref } from 'vue';

const fileId = ref('');
</script>

多文件上传

<template>
  <FileSelector
    v-model="fileIds"
    :multiple="true"
    placeholder="请选择文件"
  />
</template>

<script setup>
import { ref } from 'vue';

const fileIds = ref([]);
</script>

限制文件类型

<template>
  <FileSelector
    v-model="fileId"
    :accept="['.pdf', '.doc', '.docx']"
    placeholder="请选择文档"
  />
</template>

限制文件大小

<template>
  <FileSelector
    v-model="fileId"
    :max-size="50"
    placeholder="最大50MB"
  />
</template>

Popover 显示模式

<template>
  <FileSelector
    v-model="fileIds"
    :multiple="true"
    display-mode="popover"
  />
</template>

与表单设计器集成

在表单设计器中，该组件作为 file-selector 类型的表单项使用：

{
  "type": "file-selector",
  "field": "attachments",
  "label": "附件",
  "props": {
    "multiple": true,
    "maxSize": 100,
    "accept": [".pdf", ".doc", ".docx", ".xls", ".xlsx"],
    "placeholder": "请上传附件"
  }
}

弹窗布局

+--------------------------------------------------+
|  上传文件                                    [X] |
+--------------------------------------------------+
|  最近上传          |  拖拽文件到此处上传          |
|  ┌─────────────┐  |  ┌─────────────────────────┐ |
|  │ file1.pdf   │  |  │                         │ |
|  │ file2.docx  │  |  │    点击或拖拽上传       │ |
|  │ file3.xlsx  │  |  │                         │ |
|  └─────────────┘  |  └─────────────────────────┘ |
|                   |  已上传文件列表              |
|                   |  ┌─────────────────────────┐ |
|                   |  │ 文件名  大小  操作      │ |
|                   |  └─────────────────────────┘ |
+--------------------------------------------------+
|                          [取消]  [确认]          |
+--------------------------------------------------+

API 依赖

• uploadFile() - 上传文件
• getFilesInfo() - 获取文件信息
• getRecentFiles() - 获取最近上传的文件
• getFileUrl() - 获取文件访问 URL