# @hbtv/media-upload

> 上传组件

Latest version **2.1.15** (published 2021-06-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hbtv/media-upload
pnpm add @hbtv/media-upload
yarn add @hbtv/media-upload
bun add @hbtv/media-upload
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.15 |
| Published | 2021-06-01 |
| First published | 2020-06-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 117.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | gegang, zix2002, yugong, dokey, gogoing, xuezhidp, aa719032411 |

## Links

- npm: https://www.npmjs.com/package/@hbtv/media-upload
- Repository: /media-upload
- npm.io page: https://npm.io/package/@hbtv/media-upload

## Dependencies (10)

- [antd](https://npm.io/package/antd.md) 4.9.2
- [ahooks](https://npm.io/package/ahooks.md) ^2.10.2
- [eslint](https://npm.io/package/eslint.md) ^7.18.0
- [ali-oss](https://npm.io/package/ali-oss.md) ^6.12.0
- [cropperjs](https://npm.io/package/cropperjs.md) ^1.5.9
- [react-cropper](https://npm.io/package/react-cropper.md) ^2.1.4
- [@types/ali-oss](https://npm.io/package/@types/ali-oss.md) ^6.0.5
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^4.3.0
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) ^4.14.1
- [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) ^4.14.1

## Recent versions

- 2.1.15 (latest) — 2021-06-01
- 1.1.3-beta (beta) — 2020-09-09
- 2.1.14 — 2021-05-19
- 2.1.13 — 2021-05-08
- 2.1.12 — 2021-03-11
- 2.1.11 — 2021-02-20
- 2.1.10 — 2021-02-20
- 2.1.9 — 2021-01-28
- 2.1.8 — 2021-01-28
- 2.1.6 — 2021-01-22
- 2.1.5 — 2021-01-22
- 2.1.4 — 2021-01-21
- 2.1.3 — 2021-01-13
- 2.1.1 — 2021-01-11
- 2.1.0 — 2021-01-11
- … 37 more at https://npm.io/package/@hbtv/media-upload/versions

## README

# @hbtv/media-upload 文件上传组件

## 安装

`npm install @hbtv/media-upload --save`

## ChangeLog

[更新记录](./CHANGELOG.md)

## 使用方法

```tsx

import { MediaUpload } from '@hbtv/media-upload';

<MediaUpload
    services={services}
    fileSize="2m"
    rectSize="300*300"
    fileType={['image','video']}
    maxLength={1}
/>
```

## API

|  参数  |  说明  |  类型  |  默认值  |
|  ---   |  ---  |  ---  |  ---  |
|  fileKey  |  上传时的key  |  `string` | `file` |
|  preview  |  是否显示预览  |  `boolean`  | `true` |
|  multiple  |  是否允许选择多个  |  `boolean`  | `false` |
|  returnUrlOnly  |  是否进返回url, 否则返回整个media对象  |  `boolean`  | `true` |
|  services  |  上传的接口  |  详见下方定义  |    |
|  fileSize  |  文件大小  |  string，例如：`512k, 1Mb等`  |  2mb  |
|  rectSize  |  图片裁剪大小  | string，例如： `300*300`  |  `undefined`  |
|  fileType  |  文件类型  | array: `['image', 'file', 'video', 'audio', 'document']`  |  `['image']`  |
|  maxLength  |  允许上传的文件个数  |  number  |  `1`  |
|  buttonText  |  上传按钮文章  |  string  |  `上传`  |
|  data  |  key-value 结构的数据，用于 services  |  object  |  `{}`  |
|  value  |  初始值  |  `[]`或`string`  |  `undefined`  |
|  onChange  |  选中后的事件  |  `( string或[] ) => void`  |  `undefined`  |
|  showButton  |  是否显示上传按钮  |  `boolean`  |  `true`  |
|  visible  |  是的显示对话框  |  `boolean`  |  `false`  |
|  onCancel  |  对话框关闭后的回调  |  `() => void`  |  `undefined`  |
|  showTips  |  是否显示上传提示信息  |  `boolean`  |  `false`  |
|  showTips  |  是否显示上传提示信息  |  `boolean`  |  `false`  |
|  uploadByClient  |  是否客户端直传oss  |  `boolean`  |  `true`  |

## services 的定义

services 必须实现5个方法，并返回 `Promise`

```ts
interface ServicesType {
    search: (params?: ParamsType) => Promise<any>; // 查询列表 ParamsType 见下方
    destroy: ({ id }: { id: number }) => Promise<any>; // 删除
    upload: (data: FormData) => Promise<any>; // 上传
    token: (disk: string, data: TokenDataType) => Promise<any>; // 获取上传七牛的token  disk=qiniu
    find: ({ id }: { id: number | string }) => Promise<any>; // 查询单个上传文件, 主要用来查询状态
}

interface ParamsType  {
    page?: string;
    pageSize?: string;
    fileSize?: string;
    fileType?: string;
    rectSize?: string;
}

interface TokenDataType {
    fileType: string;
    fileName: string;
    [k:string]: any; // 父组件传来的数据
}

```

---
_Source: https://npm.io/package/@hbtv/media-upload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._