@beisen-phoenix/file-preview v1.1.11

文件预览组件

显示文件预览的组件，配合上传组件，可以组成上传加预览的功能

参数，详情请看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[] // 文件对象，定义请看下面的 【文件数据格式的定义】
}

文件数据格式定义

@beisen-phoenix/upload-intf

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>
  );
}

}