jamis
Version:
一种支持通过JSON配置方式生成页面的组件库
240 lines (239 loc) • 6.69 kB
TypeScript
import type { FormBaseControlSchema, FormControlProps, IFormItemStore, IFormStore, SchemaApi, SchemaClassName, SchemaExpression, SchemaTokenizeableString } from '../types';
export type InputFileRendererEvent = 'change' | 'success' | 'fail' | 'remove';
export type InputFileRendererAction = 'clear';
/**
* File 文件上传控件
*/
export interface FileControlSchema extends FormBaseControlSchema {
/**
* 指定为文件上传
*/
type: 'input-file';
/**
* 上传文件按钮说明
* @default 请选择文件
*/
btnLabel?: string | false;
/**
* 默认只支持纯文本类型,要支持其他类型,请配置此属性。建议直接填写文件后缀
* 如:.txt,.csv
*
* 多个类型用逗号隔开。
*
* @default text/plain
*/
accept?: SchemaExpression;
/**
* 如果上传的文件比较小可以设置此选项来简单的把文件 base64 的值给 form 一起提交,目前不支持多选。
*/
asBase64?: boolean;
/** 是否删除base64字符串中的前缀 */
trimBase64Prefix?: boolean;
/**
* 如果不希望 File 组件上传,可以配置 `asBlob` 或者 `asBase64`,采用这种方式后,组件不再自己上传了,而是直接把文件数据作为表单项的值,文件内容会在 Form 表单提交的接口里面一起带上。
*/
asBlob?: boolean;
/**
* 是否自动开始上传
*/
autoUpload?: boolean;
/**
* 默认 `/api/upload/chunk` 想自己存储时才需要关注。
*/
chunkApi?: SchemaApi;
/**
* 分块大小,默认为 5M.
*
* @default 5242880
*/
chunkSize?: number;
/**
* 分块上传的并发数
*/
concurrency?: number;
/**
* 分割符
*/
delimiter?: string;
/**
* 默认显示文件路径的时候会支持直接下载,
* 可以支持加前缀如:`http://xx.dom/filename=` ,
* 如果不希望这样,可以把当前配置项设置为 `false`。
*
* 1.1.6 版本开始将支持变量 ${xxx} 来自己拼凑个下载地址,并且支持配置成 post.
*/
downloadUrl?: SchemaApi;
/**
* 模板下载地址
*/
templateUrl?: SchemaApi;
/**
* 默认 `file`, 如果你不想自己存储,则可以忽略此属性。
* @default file
*/
fileField?: string;
/**
* 默认 `/api/upload/finishChunkApi` 想自己存储时才需要关注。
*
* @default /api/upload/finishChunkApi
*/
finishChunkApi?: SchemaApi;
/**
* 是否隐藏上传按钮
*/
hideUploadButton?: boolean;
/**
* 最多的个数
*/
maxLength?: number;
/**
* 默认没有限制,当设置后,文件大小大于此值将不允许上传。
*/
maxSize?: number;
/**
* 默认 `/api/upload/file` 如果想自己存储,请设置此选项。
*
* @default /api/upload/file
*/
receiver?: SchemaApi;
/**
* 默认 `/api/upload/startChunk` 想自己存储时才需要关注。
*
* @default /api/upload/startChunk
*/
startChunkApi?: string;
/**
* 默认为 'auto' amis 所在服务器,限制了文件上传大小不得超出10M,所以 amis 在用户选择大文件的时候,自动会改成分块上传模式。
*/
useChunk?: 'auto' | boolean;
/**
* 按钮 CSS 类名
*/
btnClassName?: SchemaClassName;
/**
* 上传按钮 CSS 类名
*/
btnUploadClassName?: SchemaClassName;
/**
* 是否为多选
*/
multiple?: boolean;
/**
* 1. 单选模式:当用户选中某个选项时,选项中的 value 将被作为该表单项的值提交,
* 否则,整个选项对象都会作为该表单项的值提交。
* 2. 多选模式:选中的多个选项的 `value` 会通过 `delimiter` 连接起来,
* 否则直接将以数组的形式提交值。
*/
joinValues?: boolean;
/**
* 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。
*/
extractValue?: boolean;
/**
* 清除时设置的值
*/
resetValue?: any;
/**
* 上传后把其他字段同步到表单内部。
*/
autoFill?: {
[propName: string]: SchemaTokenizeableString;
};
/**
* 初始化时是否把其他字段同步到表单内部。
*/
initAutoFill?: boolean;
/**
* 接口返回的数据中,哪个用来当做值
*/
valueField?: string;
/**
* 接口返回的数据中,哪个用来展示文件名
*/
nameField?: string;
/**
* 接口返回的数据中哪个用来作为下载地址。
*/
urlField?: string;
/**
* 按钮状态文案配置。
*/
stateTextMap?: {
init: string;
pending: string;
uploading: string;
error: string;
uploaded: string;
ready: string;
};
/**
* 说明文档内容配置
*/
documentation?: string;
/**
* 说明文档链接配置
*/
documentLink?: string;
/**
* 是否为拖拽上传
*/
draggable?: boolean;
/**
* @deprecated 请使用 `draggable`
*/
drag?: boolean;
/**
* 是否显示清除按钮
*/
clearable?: boolean;
/**
* 清除按钮的样式
*/
clearBtnClassName?: SchemaClassName;
/**
* 表单项value改变事件监听
*/
onChange?: (curr: any, prev: any, itemStore: IFormItemStore, formStore: IFormStore) => any;
}
export interface InputFileProps extends FormControlProps, Omit<FileControlSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName' | 'onChange'> {
stateTextMap: {
init: string;
pending: string;
uploading: string;
error: string;
uploaded: string;
ready: string;
};
}
export interface InputFileX extends File {
path?: string;
error?: string;
state?: 'init' | 'error' | 'pending' | 'uploading' | 'uploaded' | 'invalid' | 'ready';
progress?: number;
id?: any;
filename?: string;
url?: string;
value?: any;
result?: any;
[key: string]: any;
}
export interface FileState {
uploading: boolean;
files: Array<InputFileX>;
error?: string | null;
}
export interface ObjectState {
key: string;
uploadId: string;
loaded: number;
total: number;
[propName: string]: any;
}
export interface FileTask {
file: File;
partNumber: number;
partSize: number;
start: number;
stop: number;
[propName: string]: any;
}