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