Needless UI

组件

文件拖放区

拖放或选择文件，支持校验、预览，以及显示进度的上传。

导入

import-dropzone.ts
import { NuiDropzone, type NuiUploader } from '@needless-ui/angular/dropzone';

NuiDropzone

用于拖放或选择文件的区域。

选择器
nui-dropzone
名称类型默认值说明
files双向绑定File[][]它保存的文件，按顺序排列。
accept输入string可接收的文件类型，写法同 <input type="file">。
multiple输入booleantrue一次可接收多个文件。
directory输入booleanfalse提供一个选择文件夹的按钮。
maxFiles输入numberInfinity最多可保存的文件数。
maxSize, minSize输入number (bytes)文件的最大和最小大小，单位为字节。
validate输入(file: File) => string | null校验每个文件。返回一条消息即拒绝该文件。
upload输入NuiUploader<R>发送一个文件。不提供时，文件只会被保存。
concurrency输入number3同时上传的文件数。
hint输入string显示在拖放区文字下方的一行说明，例如可接收哪些文件。
disabled输入booleanfalse不接收任何文件。
labels输入Partial<NuiDropzoneLabels>它显示或播报的所有文本，供翻译使用。
uploaded输出NuiUpload<R>发出上传完成的文件，以及 upload 返回的结果。
rejected输出{ file, reason }[]发出被拒绝的文件及其原因。
queue属性NuiUploadQueue<R>上传队列，可在代码中取消、重试和读取进度。
take方法(files: Iterable<File>) => void在代码中添加文件，并逐个校验。

NuiUploader

发送一个文件：以 0 到 1 报告进度，并在收到中止信号时停止。

名称类型默认值说明
(file, context)方法(file: File, { signal, progress }) => Promise<R>返回一个 Promise，其结果为服务器返回的任何内容。