文件上传 File Upload

#基础用法

Upload artwork

file-upload/basic.vue

<script setup lang="ts">
import { file } from "@bysages/icons";
import { FileUpload, Icon } from "@bysages/vue";
</script>

<template>
  <FileUpload.Root :max-files="3" accept="image/*">
    <FileUpload.Label>Upload artwork</FileUpload.Label>
    <FileUpload.Dropzone>
      <FileUpload.Trigger>Choose files</FileUpload.Trigger>
    </FileUpload.Dropzone>
    <FileUpload.ItemGroup>
      <FileUpload.Context v-slot="{ acceptedFiles }">
        <FileUpload.Item v-for="file in acceptedFiles" :key="file.name" :file="file">
          <FileUpload.ItemPreview>
            <Icon :glyph="file" />
          </FileUpload.ItemPreview>
          <FileUpload.ItemName />
          <FileUpload.ItemSizeText />
          <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
        </FileUpload.Item>
      </FileUpload.Context>
    </FileUpload.ItemGroup>
  </FileUpload.Root>
</template>

#属性

#ClearTrigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Dropzone

属性	类型	默认值	描述
`disableClick`	`boolean \| undefined`		是否禁用拖放区的 click 事件

#HiddenInput

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemDeleteTrigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemGroup

属性	类型	默认值	描述
`type`	`ItemType \| undefined`		—

#ItemName

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemPreviewImage

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemPreview

属性	类型	默认值	描述
`type`	`string`	`'.*'`	要匹配的文件类型；默认匹配所有文件类型

#ItemSizeText

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Item

属性	类型	默认值	描述
`file`	`File`		—
`type`	`ItemType \| undefined`		—

#Label

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	触发器使用的控件高度档位
`accept`	`Record<string, string[]> \| fileUpload.FileMimeType \| fileUpload.FileMimeType[]`		可接受的文件类型
`acceptedFiles`	`File[]`		已接受文件的受控值
`allowDrop`	`boolean`	`true`	是否允许在拖放区内拖放文件
`capture`	`'user' \| 'environment'`		拍摄媒体时使用的默认摄像头
`defaultAcceptedFiles`	`File[]`		默认已接受的文件
`directory`	`boolean`		是否接受目录；仅在 WebKit 浏览器中有效
`disabled`	`boolean`		是否禁用文件输入框
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; dropzone: string; hiddenInput: string; trigger: string; label: string; item(id: string): string; itemName(id: string): string; itemSizeText(id: string): string; itemPreview(id: string): string; }>`		各元素的 id，便于组合使用
`invalid`	`boolean`		文件输入框是否无效
`locale`	`string`	`"en-US"`	当前语言环境，基于 BCP 47 标准
`maxFiles`	`number`	`1`	文件数量上限
`maxFileSize`	`number`	`Infinity`	文件大小上限（字节）
`minFileSize`	`number`	`0`	文件大小下限（字节）
`name`	`string`		底层文件输入框的 name 属性
`preventDocumentDrop`	`boolean`	`true`	是否阻止 document 上的 drop 事件
`readOnly`	`boolean`		文件输入框是否只读
`required`	`boolean`		文件输入框是否必填
`transformFiles`	`(files: File[]) => Promise<File[]>`		转换文件的函数
`translations`	`fileUpload.IntlTranslations`		本地化提示文案
`validate`	`(file: File, details: fileUpload.FileValidateDetails) => fileUpload.FileError[] \| null`		校验文件的函数

#Trigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。