@hbtv/media-upload NPM

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

安装

npm install @hbtv/media-upload --save

ChangeLog

使用方法

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

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; // 父组件传来的数据
}