2.1.9 • Published 3 years ago
@hbtv/media-upload-3x v2.1.9
@hbtv/media-upload-3x 文件上传组件
安装
npm install @hbtv/media-upload-3x --save
ChangeLog
使用方法
import { MediaUpload } from '@hbtv/media-upload-3x';
<MediaUpload
services={services}
fileSize="2m"
rectSize="300*300"
fileType={['image','video']}
maxLength={1}
/>API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 |
| uploadVideoByServer | 是否直接上传视频到服务器 | boolean | false |
| uploadAudioByServer | 是否直接上传音频到服务器 | boolean | false |
services 的定义
services 必须实现5个方法，并返回 Promise
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; // 父组件传来的数据
}