@hbtv/media-upload-3x

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