Skip to content

Commit a183f0d

Browse files
committed
docs: add Chinese README
1 parent 1b8ac59 commit a183f0d

2 files changed

Lines changed: 117 additions & 0 deletions

File tree

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
</p>
1414
</div>
1515

16+
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
17+
1618

1719
## Highlights
1820

README.zh-CN.md

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<div align="center">
2+
<h1>@rc-component/upload</h1>
3+
<p><sub>Ant Design 生态的一部分。</sub></p>
4+
<p>📤 React 文件上传基础组件,支持拖拽、请求定制和上传列表。</p>
5+
6+
<p>
7+
<a href="https://www.npmjs.com/package/@rc-component/upload"><img src="https://img.shields.io/npm/v/@rc-component/upload.svg?style=flat-square" alt="npm version" /></a>
8+
<a href="https://www.npmjs.com/package/@rc-component/upload"><img src="https://img.shields.io/npm/dm/@rc-component/upload.svg?style=flat-square" alt="npm downloads" /></a>
9+
<a href="https://github.com/react-component/upload/actions"><img src="https://github.com/react-component/upload/actions/workflows/react-component-ci.yml/badge.svg" alt="CI" /></a>
10+
<a href="https://codecov.io/gh/react-component/upload"><img src="https://img.shields.io/codecov/c/github/react-component/upload/master.svg?style=flat-square" alt="Codecov" /></a>
11+
<a href="https://bundlephobia.com/package/@rc-component/upload"><img src="https://badgen.net/bundlephobia/minzip/@rc-component/upload" alt="bundle size" /></a>
12+
<a href="https://github.com/umijs/dumi"><img src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square" alt="dumi" /></a>
13+
</p>
14+
</div>
15+
16+
<p align="center"><a href="./README.md">English</a> | 简体中文</p>
17+
18+
19+
## 特性
20+
21+
- 支持 Ajax uploads with progress, headers, credentials, and custom request overrides.
22+
- 支持 directory, drag, paste, async action, and before-upload flows.
23+
- 暴露 `abort(file)` through the component instance for active requests.
24+
- 提供 semantic `classNames` and `styles` slots for the hidden input.
25+
26+
## 安装
27+
28+
```bash
29+
npm install @rc-component/upload
30+
```
31+
32+
## 使用
33+
34+
```tsx pure
35+
import Upload from '@rc-component/upload';
36+
37+
export default () => (
38+
<Upload
39+
action="/upload"
40+
onStart={file => {
41+
console.log('start', file.name);
42+
}}
43+
onSuccess={(response, file) => {
44+
console.log('success', file.name, response);
45+
}}
46+
>
47+
<button type="button">Upload</button>
48+
</Upload>
49+
);
50+
```
51+
52+
Online preview: https://upload.react-component.vercel.app/
53+
54+
## API
55+
56+
### Upload
57+
58+
| 名称 | 类型 | 默认值 | 说明 |
59+
| --- | --- | --- | --- |
60+
| `accept` | string \| AcceptConfig | - | Input accept config. |
61+
| `action` | string \| `(file) => string \| PromiseLike<string>` | - | Upload URL or async resolver. |
62+
| `beforeUpload` | `(file, fileList) => BeforeUploadFileType \| Promise<void \| BeforeUploadFileType> \| void` | - | Validate or transform before upload. Return false to stop upload. |
63+
| `className` | string | - | Root class name. |
64+
| `classNames` | `{ input?: string }` | - | Semantic class names. |
65+
| `component` | React.ComponentType<any> \| string | `'span'` | Root component. |
66+
| `customRequest` | CustomUploadRequestOption | - | Override default request behavior. |
67+
| `data` | object \| `(file) => object` | `{}` | Extra upload data. |
68+
| `directory` | boolean | false | Enable directory upload. |
69+
| `disabled` | boolean | false | Disable upload trigger. |
70+
| `hasControlInside` | boolean | false | Whether child already contains a control element. |
71+
| `headers` | Record<string, string> | `{}` | Request headers. |
72+
| `id` | string | - | Input id. |
73+
| `method` | `'POST' \| 'PUT' \| 'PATCH' \| 'post' \| 'put' \| 'patch'` | `'post'` | Request method. |
74+
| `multiple` | boolean | false | Allow multiple file selection. |
75+
| `name` | string | `'file'` | File field name. |
76+
| `onBatchStart` | `(fileList) => void` | - | Called when a batch starts. |
77+
| `onError` | `(error, response, file) => void` | - | Upload error callback. |
78+
| `onProgress` | `(event, file) => void` | - | Upload progress callback. |
79+
| `onStart` | `(file) => void` | - | Upload start callback. |
80+
| `onSuccess` | `(response, file, xhr) => void` | - | Upload success callback. |
81+
| `openFileDialogOnClick` | boolean | true | Open file dialog when root is clicked. |
82+
| `pastable` | boolean | false | Enable paste upload. |
83+
| `prefixCls` | string | `'rc-upload'` | Prefix class name. |
84+
| `style` | React.CSSProperties | - | Root style. |
85+
| `styles` | `{ input?: React.CSSProperties }` | - | Semantic styles. |
86+
| `withCredentials` | boolean | false | Send credentials with Ajax upload. |
87+
88+
### Methods
89+
90+
| 名称 | 类型 | 说明 |
91+
| ------- | ------------------------- | ----------------------- |
92+
| `abort` | `(file?: RcFile) => void` | Abort an active upload. |
93+
94+
## 本地开发
95+
96+
```bash
97+
npm install
98+
npm start
99+
npm test
100+
npm run tsc
101+
npm run compile
102+
npm run build
103+
```
104+
105+
## 发布
106+
107+
```bash
108+
npm run prepublishOnly
109+
```
110+
111+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
112+
113+
## 许可证
114+
115+
@rc-component/upload is released under the [MIT](./LICENSE) license.

0 commit comments

Comments
 (0)