@beisen-phoenix/file-preview
v1.1.11
Published
显示文件预览的组件,配合[上传](http://gitlab.beisencorp.com/ux-phoenix/upload)组件,可以组成上传加预览的功能
Downloads
27
Readme
文件预览组件
显示文件预览的组件,配合上传组件,可以组成上传加预览的功能
参数,详情请看interface定义
import {IUploadFileType} from '@beisen-phoenix/upload-intf'
export interface PreviewListProps {
edit?: boolean; // 是否可以编辑
deletable?: boolean; //在edit为true的前提下,是否允许删除文件
}
export interface CallbackProps {
onDelete?: (id: string) => void; //点击删除操作的回调,传递文件对象的id || lid
onDownLoad?: (id: string) => void; // 点击下载操作的回调,传递文件对象的id || lid
onClick?: (id: string) => void; // 点击除删除,下载之外任意预览区域的操作,一般用来显示文件大预览
}
export interface FileListProps {
files: IUploadFileType[] // 文件对象,定义请看下面的 【文件数据格式的定义】
}
文件数据格式定义
export type TStatus = 'done' | 'progress' | 'error' | 'pending';
export interface IUploadFileType {
FileName: string; //文件名
status: TStatus; // 文件状态
MediaType: string;
ClientUrl?: string; // 预览地址
DfsPath?: string; //下载地址
percent?: number; // 文件上传进度
raw?: File; // 原文件列表
id?: string; //远程文件id,数据来自接口
lid?: string; //本地文件id,数据来自用户本地,并且未与对象建立关联时使用此ID
}
代码示例: 只显示文件预览
import React from 'react';
import FilePreview from '@beisen-phoenix/file-preview';
import { UploadFileType } from '@beisen-phoenix/upload';
const files: UploadFileType[] = [
{
id: 'dfdsfds',
FileName: 'xxxxx.png',
ClientUrl:
'http://stnew.beisen.com/ux/beisen-common/upaas-static/file-icons/zip.svg',
status: 'done',
MediaType: 'png'
},
{
id: 'fds',
FileName: '另一个文件.sss',
ClientUrl:
'http://stnew.beisen.com/ux/beisen-common/upaas-static/file-icons/zip.svg',
status: 'done',
MediaType: 'pnf'
}
];
export default function App(props: { url: string | ((f: any) => string) }) {
return (
<div>
<FilePreview files={files} />
</div>
);
}
代码示例: 上传 + 预览
import React, { useState, useCallback } from 'react';
import FilePreview from '../../src';
import Upload, { UploadFileType, msgType } from '@beisen-phoenix/upload';
export default function App(props: { url: string | ((f: any) => string) }) {
const [files, setFiles] = useState<UploadFileType[]>([]);
const handleChange = (files: UploadFileType[]) => {
console.log(files);
setFiles(files);
};
const onError = useCallback(err => {
if (err.type === msgType.overLimit) {alert('文件个数超出上限');}
if (err.type === msgType.overSize) {alert('文件体积超出上限');}
if (err.type === msgType.networkFail) {alert('网络出错');}
}, []);
const handleDelete = id => {
let idx = files.findIndex(item => item.id === id);
if (idx !== -1) {
let newFiles = [...files.slice(0, idx), ...files.slice(idx + 1)];
setFiles(newFiles);
}
};
return (
<div>
<div>
<Upload onChange={handleChange} onError={onError} url="hehe" files={files} sizeLimit={0.01}>
<button>上传</button>
</Upload>
</div>
<FilePreview files={files} edit onDelete={handleDelete} />
</div>
);
}
}