Upload
Props
文件上传控件
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
| onChange | func | () => {} | 文件列表变化时的回调，如新增、删除、上传、上传完成、进度更新等操作 @param 文件列表@param 文件名称@param 文件 uid@param 文件的大小@param 文件的类型，MIME@param 文件的上传状态，只有传入 handleUpload 时才有的属性 [uploading,success,error]@param 文件的上传进度，只有 handleUpload 中上报了 progress 才会有 | |
| onAdd | func | () => {} | 正在添加文件时的回调，可通过返回值控制添加行为 @param 文件列表@returns 是否应用添加操作，返回 false 时不触发添加 | |
| onRemove | func | () => {} | 正在删除文件时的回调，可通过返回值控制添加行为 @param 删除的文件@param 删除文件的索引@returns 是否应用删除操作，返回 false 时不触发删除 | |
| getRemovableOfItem | func | 自定义文件是否可删除，默认为 loading 时不可删除，如果需要都可删除可直接传入 () => true | ||
| onError | func | 选中或读取文件错误回调，自定义错误处理，不传时默认行为会在报错时拦截文件进入列表并弹窗提示用户 @param 错误信息@param 错误的具体信息@param 错误的类型，包括 FileTypeError - 文件类型错误、FileSizeError - 文件大小错误、FileMaxCountError - 文件数量错误，以及其他可能出现的原生错误 | ||
| onPreview | func | 预览操作，自定义预览操作，不传时默认为对图片可进行预览，点击会在新窗口打开图片，需要关闭默认行为可使用 null @param 预览的文件@param 预览文件的索引 | ||
| getPreviewableOfItem | func | 自定义预览操作时每个文件都会调用预览，可以使用这个函数来过滤不想出现预览的文件 @param 检测的文件 | ||
| handleUpload | func | 定义上传操作，受控组件中不起作用请自行处理
应交互需求，上传中某些样式下会有进度条，需要调用 handleProgress 来更新进度，如果不调用，将会出现一个假的进度条，😂 @param 上传的文件@param 上报上传的进度，(progress) => void，在上传过程中调用 handleProgress(progress) 来更新文件进度 | ||
| disabled | bool | 是否禁用 | ||
| multiple | bool | 是否可以多选 | ||
| accept | string | 可接受的文件类型, MIME
[input accept](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) | ||
| maxSize | number | 文件大小限制 | ||
| maxCount | number | 文件数量限制 | ||
| selector | node | 自定义选择控件，为 null 时隐藏 | ||
| listType | union | 'list' | 文件列表展示类型，格式为 'list' | ['list', 'card'] | ['dropzone', 'thumbnail']
none - 隐藏文件列表
text - 展示文件名称列表
list - 普通列表形式，可通过第二个参数设置 thumbnail 和 card
dropzone - 拖拽上传区域，可通过第二个参数设置 thumbnail 和 card | |
| defaultFileList | arrayOf | 默认文件列表，非受控组件使用，初始化时才有效 | ||
| fileList | arrayOf | 文件列表，传入后变为受控组件 | ||
| customStyle | shape | 自定义样式 |
说明
- 传入其它原生的 props 会自动附加到最外层的 div 上，如 style、className 等
- 是否受控由一开始是否传入 fileList 决定，如果想要受控但是一开始未传入可能会导致逻辑性的错误。受控情况下需要自行处理所有数据。
- 选择文件的事件触发顺序为 打开文件选择框 - 选择文件 - 检查文件类型（有错误会中断，触发 onError） - 检查文件大小（有错误会中断，触发 onError） - 调用 onAdd（没有则跳过，返回 false 则中断） - 检查文件数量（有错误会中断，触发 onError） - 更新文件列表并触发 onChange - 有 handleUpload 时开始更新文件 status 为 uploading 并开始上传文件，触发 onChange - 文件上传进度更新时可调用 handleProcess，更新进度，更新后会触发 onChange - 文件上传成功或失败时更新文件 status 并触发 onChange
- 单选时选中文件将会直接将已有文件替换
- 单选时在调用 onAdd 之前如已存在选择文件将会先调用 onRemove 检查可否移除已有文件，只有两个都通过时才会触发 onChange
- 单选时不会触发文件数量错误，
fileList 中的文件格式
const fileShape = {
// 文件名，用来展示名称
name: PropTypes.string.isRequired,
// 文件的 uid，唯一标示，用作性能优化和标志位
uid: PropTypes.string.isRequired,
// 文件的尺寸
size: PropTypes.number,
// 文件的类型
type: PropTypes.string,
// 文件的状态
status: PropTypes.string,
// 文件上传的进度
progress: PropTypes.number,
// 缩略图的地址
thumbnailUrl: PropTypes.string
// 文件的地址，默认用作点击新窗口打开
url: PropTypes.string
}