choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
303 lines (302 loc) • 8.14 kB
TypeScript
import { ReactNode } from 'react';
import { T } from '../../../lib/upload/utils';
import { FormField, FormFieldProps } from '../field/FormField';
import { UploadFile } from './interface';
export interface UploadProps extends FormFieldProps {
/**
* 可接受的上传文件类型
*/
accept?: string[];
/**
* 上传文件路径
*/
action: string;
/**
* 上传所需参数或者返回上传参数的方法
*/
data?: object | Function;
/**
* 设置上传的请求头部
*/
headers?: any;
/**
* 是否支持多选文件
*/
multiple?: boolean;
/**
* 是否在选择文件后立即上传
*
* @type {boolean}
* @memberof UploadProps
*/
uploadImmediately?: boolean;
/**
* 组件右上角的帮助信息
*
* @type {ReactNode}
* @memberof UploadProps
*/
extra?: ReactNode;
/**
* input元素内已选择文件变化的回调
*
* @memberof UploadProps
*/
onFileChange?: (fileList: UploadFile[]) => void;
/**
* 上传之前的回调
*
* @memberof UploadProps
*/
beforeUpload?: (file: UploadFile, FileList: UploadFile[]) => boolean | PromiseLike<void>;
/**
* 删除后的回调
*
* @memberof UploadProps
*/
onRemoveFile?: (file: UploadFile) => void | boolean | Promise<void | boolean>;
/**
* 上传进度变化的回调
*
* @memberof UploadProps
*/
onUploadProgress?: (percent: number, file: UploadFile) => void;
/**
* 上传成功的回调
*
* @memberof UploadProps
*/
onUploadSuccess?: (response: any, file: UploadFile) => void;
/**
* 上传出错的回调
*
* @memberof UploadProps
*/
onUploadError?: (error: Error, response: any, file: UploadFile) => void;
/**
* 文件上传队列的最大长度，0表示不限制
*
* @type {number}
* @memberof UploadProps
*/
fileListMaxLength?: number;
/**
* 控制图片预览的配置对象
*
* @type {boolean}
* @memberof UploadProps
*/
showPreviewImage?: boolean;
/**
* 预览图片的宽度
*
* @type {number}
* @memberof UploadProps
*/
previewImageWidth?: number;
/**
* 是否显示上传按钮
*
* @type {boolean}
* @memberof UploadProps
*/
showUploadBtn?: boolean;
/**
* 是否显示上传列表
*
* @type {boolean}
* @memberof UploadProps
*/
showUploadList?: boolean;
/**
* 默认显示的上传列表
*
* @type {array}
* @memberof UploadProps
*/
defaultFileList?: Array<UploadFile>;
/**
* 已经上传的列表
*
* @type {array}
* @memberof UploadProps
*/
uploadFileList?: Array<UploadFile>;
/**
* 上传请求时是否携带 cookie
*
* @type {boolean}
* @memberof UploadProps
*/
withCredentials?: boolean;
/**
* 是否以追加形式添加文件至列表中
*
* @type {boolean}
* @memberof UploadProps
*/
appendUpload?: boolean;
/**
* 是否每次上传全部文件
*
* @type {boolean}
* @memberof UploadProps
*/
partialUpload?: boolean;
}
export default class Upload extends FormField<UploadProps> {
static displayName: string;
static defaultProps: {
suffixCls: string;
multiple: boolean;
headers: {};
data: {};
action: string;
name: string;
withCredentials: boolean;
appendUpload: boolean;
partialUpload: boolean;
uploadImmediately: boolean;
fileListMaxLength: number;
showPreviewImage: boolean;
previewImageWidth: number;
showUploadBtn: boolean;
showUploadList: boolean;
beforeUpload: typeof T;
onUploadSuccess: () => void;
onUploadError: () => void;
readOnly: boolean;
disabled: boolean;
noValidate: boolean;
trim: import("../data-set/enum").FieldTrim;
};
/**
* 保存上传的文件对象
*
* 若直接传递，浏览器会认为它是Mobx对象，因此有时需要手动复制并传值调用
*
* @type {UploadFile[]}
* @memberof Upload
*/
fileList: UploadFile[];
/**
* 原生<input>元素的引用
*
* @private
* @type {HTMLInputElement}
* @memberof Upload
*/
private nativeInputElement;
constructor(props: any, context: any);
componentWillReceiveProps(nextProps: any): void;
getOmitPropsKeys(): string[];
getOtherProps(): any;
saveNativeInputElement: (elem: any) => any;
/**
* 传递包装按钮的点击事件
*
*/
handleWrapperBtnClick: () => void;
render(): JSX.Element;
handleUploadBtnClick: () => void;
/**
* 文件上传前的回调
*
* @param {UploadFile}
* @param {UploadFile[]}
* @memberof Upload
*/
beforeUpload: (file: UploadFile, fileList: UploadFile[]) => boolean | PromiseLike<void>;
startUpload: () => void;
/**
* 处理<input type="file">元素的change事件，
* 主要是取出事件对象中的files对象并传递给uploadFiles方法
*
* @param {*} e <input>元素的change事件对象
* @memberof Upload
*/
handleChange(e: any): void;
/**
* 分别上传fileList中的每个文件对象
*
* @param {UploadFile[]} fileList 文件对象数组
* @returns {void}
* @memberof Upload
*/
uploadFiles(fileList: UploadFile[]): void;
/**
* 上传每个文件对象
*
* @param {*} file
* @returns {void}
* @memberof Upload
*/
upload(file: any): void;
/**
* 处理上传成功的函数，根据结果设置文件对象的状态，
* 用于在UploadList中的展示
*
* @param {number} status HTTP状态码
* @param {string} response 响应对象
* @param {UploadFile} file 文件对象
* @returns
*/
handleSuccess(status: number, response: any, file: UploadFile): void;
/**
* 处理上传进度变化的函数，更新文件对象中的percent值，
* 用于在UploadList中展示
*
* @param {number} percent 上传百分比
* @param {UploadFile} file 文件对象
* @returns
*/
handleProgress(percent: number, file: UploadFile): void;
/**
* 处理上传出错的函数，用于设置文件对象的status值，
*
* @param {Error} error 错误对象
* @param {string} responseText 处理成字符串的响应对象
* @param {UploadFile} file 文件对象
* @returns
*/
handleError(error: Error, responseText: string, response: any, file: UploadFile): void;
handleRemove: (file: UploadFile) => void;
handleOnRemove(file: UploadFile): void;
/**
* 判断文件后缀名是否合格
* this.props.accept值为falsy时返回true，否则正常判断
*
* @param {UploadFile[]} fileList 文件对象数组
* @returns {boolean}
* @memberof Upload
*/
isAcceptFiles(fileList: UploadFile[]): boolean;
/**
* 使用日期获取一个uid
*
* @param {number} index 索引
* @returns {string}
* @memberof Upload
*/
getUid(index: number): string;
/**
* 从文件对象数组中获取一个文件对象的引用，
* 首先尝试通过uid属性匹配文件对象，若失败则尝试name
*
* @param {UploadFile} file
* @param {UploadFile[]} fileList 文件对象数组
* @returns {UploadFile}
* @memberof Upload
*/
getFileItem(file: UploadFile): UploadFile | undefined;
/**
* 从文件对象数组中移除一个文件对象，
* 首先尝试通过uid属性匹配文件对象，若失败则尝试name
*
* @param {UploadFile} file
* @param {UploadFile[]} fileList
* @returns {UploadFile[]}
* @memberof Upload
*/
removeFileItem(file: UploadFile): void;
}