11<div align =" center " >
22 <h1 >@rc-component/upload</h1 >
3- <p ><sub >Ant Design 生态的一部分。</sub ></p >
4- <img alt =" Ant Design " height =" 32 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " />
3+ <p ><sub ><img alt =" Ant Design " height =" 14 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " style =" vertical-align : -0.125em ;" /> Ant Design 生态的一部分。</sub ></p >
54 <p >📤 React 文件上传基础组件,支持拖拽、请求定制和上传列表。</p >
65
76 <p >
1918
2019## 特性
2120
22- - 支持 Ajax uploads with progress, headers, credentials, and custom request overrides.
23- - 支持 directory, drag, paste, async action, and before-upload flows.
24- - 暴露 ` abort(file) ` through the component instance for active requests.
25- - 提供 semantic ` classNames ` and ` styles ` slots for the hidden input.
21+ - 支持带进度、请求头、凭证和自定义请求覆盖的 Ajax 上传。
22+ - 支持目录上传、拖拽、粘贴、异步 action 和上传前处理流程。
23+ - 通过组件实例暴露 ` abort(file) ` ,用于中止进行中的请求。
24+ - 为隐藏 input 提供语义化 ` classNames ` 和 ` styles ` 插槽。
2625
2726## 安装
2827
@@ -50,47 +49,47 @@ export default () => (
5049);
5150```
5251
53- Online preview: https://upload.react-component.vercel.app/
52+ 在线预览: https://upload.react-component.vercel.app/
5453
5554## API
5655
5756### Upload
5857
5958| 名称 | 类型 | 默认值 | 说明 |
6059| --- | --- | --- | --- |
61- | ` accept ` | string \| AcceptConfig | - | Input accept config. |
62- | ` action ` | string \| ` (file) => string \| PromiseLike<string> ` | - | Upload URL or async resolver. |
63- | ` beforeUpload ` | ` (file, fileList) => BeforeUploadFileType \| Promise<void \| BeforeUploadFileType> \| void ` | - | Validate or transform before upload. Return false to stop upload. |
64- | ` className ` | string | - | Root class name. |
65- | ` classNames ` | ` { input?: string } ` | - | Semantic class names. |
66- | ` component ` | React.ComponentType<any > \| string | ` 'span' ` | Root component. |
67- | ` customRequest ` | CustomUploadRequestOption | - | Override default request behavior. |
68- | ` data ` | object \| ` (file) => object ` | ` {} ` | Extra upload data. |
69- | ` directory ` | boolean | false | Enable directory upload. |
70- | ` disabled ` | boolean | false | Disable upload trigger. |
71- | ` hasControlInside ` | boolean | false | Whether child already contains a control element. |
72- | ` headers ` | Record<string, string> | ` {} ` | Request headers. |
73- | ` id ` | string | - | Input id. |
74- | ` method ` | ` 'POST' \| 'PUT' \| 'PATCH' \| 'post' \| 'put' \| 'patch' ` | ` 'post' ` | Request method. |
75- | ` multiple ` | boolean | false | Allow multiple file selection. |
76- | ` name ` | string | ` 'file' ` | File field name. |
77- | ` onBatchStart ` | ` (fileList) => void ` | - | Called when a batch starts. |
78- | ` onError ` | ` (error, response, file) => void ` | - | Upload error callback. |
79- | ` onProgress ` | ` (event, file) => void ` | - | Upload progress callback. |
80- | ` onStart ` | ` (file) => void ` | - | Upload start callback. |
81- | ` onSuccess ` | ` (response, file, xhr) => void ` | - | Upload success callback. |
82- | ` openFileDialogOnClick ` | boolean | true | Open file dialog when root is clicked. |
83- | ` pastable ` | boolean | false | Enable paste upload. |
84- | ` prefixCls ` | string | ` 'rc-upload' ` | Prefix class name. |
85- | ` style ` | React.CSSProperties | - | Root style. |
86- | ` styles ` | ` { input?: React.CSSProperties } ` | - | Semantic styles. |
87- | ` withCredentials ` | boolean | false | Send credentials with Ajax upload. |
88-
89- ### Methods
60+ | ` accept ` | string \| AcceptConfig | - | input accept 配置。 |
61+ | ` action ` | string \| ` (file) => string \| PromiseLike<string> ` | - | 上传地址或异步解析函数。 |
62+ | ` beforeUpload ` | ` (file, fileList) => BeforeUploadFileType \| Promise<void \| BeforeUploadFileType> \| void ` | - | 上传前校验或转换文件。返回 false 可阻止上传。 |
63+ | ` className ` | string | - | 根className。 |
64+ | ` classNames ` | ` { input?: string } ` | - | 语义className。 |
65+ | ` component ` | React.ComponentType<any > \| string | ` 'span' ` | 根组件。 |
66+ | ` customRequest ` | CustomUploadRequestOption | - | 覆盖默认请求行为。 |
67+ | ` data ` | object \| ` (file) => object ` | ` {} ` | 额外上传数据。 |
68+ | ` directory ` | boolean | false | 启用目录上传。 |
69+ | ` disabled ` | boolean | false | 禁用上传触发器。 |
70+ | ` hasControlInside ` | boolean | false | 子节点是否已包含控制元素。 |
71+ | ` headers ` | Record<string, string> | ` {} ` | 请求头。 |
72+ | ` id ` | string | - | Input id。 |
73+ | ` method ` | ` 'POST' \| 'PUT' \| 'PATCH' \| 'post' \| 'put' \| 'patch' ` | ` 'post' ` | 请求方法。 |
74+ | ` multiple ` | boolean | false | 允许多文件选择。 |
75+ | ` name ` | string | ` 'file' ` | 文件字段名。 |
76+ | ` onBatchStart ` | ` (fileList) => void ` | - | 批量开始时调用。 |
77+ | ` onError ` | ` (error, response, file) => void ` | - | 上传错误回调。 |
78+ | ` onProgress ` | ` (event, file) => void ` | - | 上传进度回调。 |
79+ | ` onStart ` | ` (file) => void ` | - | 上传开始回调。 |
80+ | ` onSuccess ` | ` (response, file, xhr) => void ` | - | 上传成功回调。 |
81+ | ` openFileDialogOnClick ` | boolean | true | 点击根节点时打开文件选择框。 |
82+ | ` pastable ` | boolean | false | 启用粘贴上传。 |
83+ | ` prefixCls ` | string | ` 'rc-upload' ` | 前缀className。 |
84+ | ` style ` | React.CSSProperties | - | 根样式。 |
85+ | ` styles ` | ` { input?: React.CSSProperties } ` | - | 语义化样式。 |
86+ | ` withCredentials ` | boolean | false | 随 Ajax 上传发送凭证。 |
87+
88+ ### 方法
9089
9190| 名称 | 类型 | 说明 |
9291| ------- | ------------------------- | ----------------------- |
93- | ` abort ` | ` (file?: RcFile) => void ` | Abort an active upload. |
92+ | ` abort ` | ` (file?: RcFile) => void ` | 中止进行中的上传。 |
9493
9594## 本地开发
9695
@@ -109,8 +108,8 @@ npm run build
109108npm run prepublishOnly
110109```
111110
112- The release flow is handled by ` @rc-component/np ` through the ` rc-np ` command after the package build.
111+ 包构建完成后,发布流程由 ` @rc-component/np ` 通过 ` rc-np ` 命令处理。
113112
114113## 许可证
115114
116- @rc-component/upload is released under the [ MIT] ( ./LICENSE ) license.
115+ @rc-component/upload 基于 [ MIT] ( ./LICENSE ) 许可证发布。
0 commit comments