---
title: WKUploader 文件上传
group:
  title: 表单组件
  path: /form/
---

## 何时使用

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import { FileValue, UploaderAcceptType, UploadStatus, View, WKPage, WKUploader } from '@wakeapp/components';
export default () => {
  const [fileList, setFileList] = useState<FileValue[]>([
    {
      url: 'https://img.yzcdn.cn/vant/leaf.jpg',
      name: 'leaf.jpg',
      status: UploadStatus.Uploading,
      message: '上传中...',
    },
    {
      url: 'https://img.yzcdn.cn/vant/tree.jpg',
      name: 'tree.jpg',
      status: UploadStatus.Failed,
      message: '上传失败',
    },
    {
      name: 'sand.jpg',
      url: 'https://img.yzcdn.cn/vant/sand.jpg',
      status: UploadStatus.Done,
    },
  ]);

  const renderCover = (file: FileValue) => {
    return <View className="wk-uploader-page__preview-cover">{file.name}</View>;
  };

  return (
    <PageWrapper>
      <View className="wk-uploader-page">
        <View className="wk-uploader-page__title">图片上传</View>
        <View className="wk-uploader-page__content">
          <WKUploader value={fileList} onChange={setFileList}></WKUploader>
        </View>
        <View>所有文件类型/previewMode为list</View>
        <View className="wk-uploader-page__content">
          <WKUploader
            value={fileList}
            onChange={setFileList}
            multiple
            accept={UploaderAcceptType.All}
            onProgress={n => console.log('文件上传进度: ', n)}
            previewMode="list"
            tip="上传文件大小不能超过20M"
          />
        </View>
        <View>限制上传文件数量 3</View>
        <View className="wk-uploader-page__content">
          <WKUploader value={fileList} onChange={setFileList} max={3} />
        </View>
        <View>限制上传文件大小 1M</View>
        <View className="wk-uploader-page__content">
          <WKUploader value={fileList} onChange={setFileList} maxSize={1} />
        </View>
        <View>自定义覆盖内容/禁用更改</View>
        <View className="wk-uploader-page__content">
          <WKUploader disabled value={fileList} onChange={setFileList} renderPreviewCover={renderCover} />
        </View>
      </View>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKUploader/index.d.ts'></API>

## WKUploaderPreviewItemProps

| Name               | Description    | Type                                                                 | Default |
| ------------------ | -------------- | -------------------------------------------------------------------- | ------- |
| className          | 类名           | `string`                                                             |         |
| style              | 样式           | `React.CSSProperties`                                                |         |
| item               | 文件对象       | `FileValue`                                                          |         |
| index              | 文件下标索引   | `number`                                                             |         |
| previewSize        | 预览宽高大小   | `number`                                                             | `80`    |
| thumb              | 是否显示缩略图 | `boolean`                                                            | `false` |
| disabled           | 是否禁用       | `boolean`                                                            | `false` |
| renderPreviewCover | 渲染预览遮罩层 | `(file: FileValue) => React.ReactNode`                               |         |
| onDelete           | 点击删除       | `(item: FileValue, index: number) => void`                           |         |
| onPreview          | 点击预览       | `(item: FileValue, index: number, type: UploaderAcceptType) => void` |         |

## FileValue

| Name    | Description      | Type           | Default                         |
| ------- | ---------------- | -------------- | ------------------------------- |
| url     | 文件 url         | `string`       |                                 |
| type    | 文件类型         | `string`       |                                 |
| name    | 文件名           | `string`       |                                 |
| size    | 文件大小         | `number`       |                                 |
| thumb   | 图片             | `string`       |                                 |
| status  | 文件上传状态     | `UploadStatus` | `('uploading', 'done', failed)` |
| message | 文件上传提示信息 | `string`       |                                 |
| isImage | 是否图片         | `boolean`      |                                 |
| isVideo | 是否视频         | `boolean`      |                                 |
