3.3.55 • Published 6 years ago

@beisen-phoenix/file-list v3.3.55

Weekly downloads
7
License
ISC
Repository
-
Last release
6 years ago

文件预览组件

显示文件预览的组件,此组件仅负责展示,没有内置功能。配合上传组件,可以组成上传加预览的功能

参数,详情请看 interface 定义

// 文件对象,定义请看下面的 【文件数据格式的定义】
 interface IPreviewItemFile extends IUploadFileType{
  deletable?: boolean
}

// 列表布局方式
export enum EListLayout {
  vertical = 'vertical',
  horizontal = 'horizontal'
}

interface IUploadFileType {
    name: string; // 文件名称
    status: EStatus; // 文件状态
    mediaType: string; // 文件类型
    previewUrl?: string; // 文件预览地址
    downloadUrl?: string; // 文件下载地址
    percent?: number; // 文件上传进度
    raw?: File; // 源文件对象
    id?: string; //后端文件id
    lid?: string; //前端生成的临时id
}

关于lid 与 id

在文件被选中并且没有上传完成的过程中,需要给文件数据一个标识,所以会临时生成一个lid = 文件名 + 时间戳,当文件上传完成并且后端返回文件对象之后,建议给文件数据追加上id作为后续操作的标识

代码示例: 只显示文件预览

import React from 'react';
import FilePreview, {ListView, IPreviewItemFile, EListLayout} from '../../src';
import {EStatus} from '@reacted/upload-intf'

const files: IPreviewItemFile[] = [
  {
    id: 'dfdsfds',
    name: 'xxxxxf放的开龙卷风fdfsfjdklsfjdsl.png',
    previewUrl: 'http://stnew.beisen.com/ux/beisen-common/upaas-static/file-icons/zip.svg',
    status: EStatus.progress,
    mediaType: 'png',
    percent: 80
  },
  {
    id: 'fdsssss',
    name: '这个名字不很长.c',
    previewUrl: 'http://stnew.beisen.com/ux/beisen-common/upaas-static/file-icons/zip.svg',
    status: EStatus.uploadFinish,
    mediaType: 'doc',
    percent: 100,
    deletable: true
  },
  {
    id: 'fds',
    name: '这个名字长啊长长长和啊.exe',
    previewUrl: 'http://stnew.beisen.com/ux/beisen-common/upaas-static/file-icons/zip.svg',
    status: EStatus.done,
    mediaType: 'ppt',
    percent: 80 
  },
  {
    id: 'fdsss',
    name: '这个名字不很长.c',
    previewUrl: 'http://stnew.beisen.com/ux/beisen-common/upaas-static/file-icons/zip.svg',
    status: EStatus.done,
    mediaType: 'doc',
    percent: 80,
    deletable: true
  },
  {
    id: 'fdsx',
    name: 'aaaabbbccdd.exe',
    previewUrl: 'http://stnew.beisen.com/ux/beisen-common/upaas-static/file-icons/zip.svg',
    status: EStatus.error,
    mediaType: 'pnf',
    percent: 90
  }
];

export default function App(props: { url: string | ((f: any) => string) }) {
  return (
    <div style={{width: '60%'}}>
      <h3>块式预览</h3>
      <FilePreview files={files} edit />
      <h3>列表式:竖排</h3>
      <ListView files={files} edit width="400px"></ListView>
      <h3>列表式:横排</h3>
      <ListView files={files} layout={EListLayout.horizontal}></ListView>
    </div>
  );
}

代码示例: 上传 + 预览

import React, { useState, useCallback } from 'react';
import FilePreview, {ListView, EListLayout} from '../../src';
import Upload from '@beisen-phoenix/upload';
import {IUploadFileType, EMsgType} from '@reacted/upload-intf'

export default function App(props: { url: string | ((f: any) => string) }) {
  const [files, setFiles] = useState<IUploadFileType[]>([]);
  const handleChange = (files: IUploadFileType[]) => {
    console.log(files);
    setFiles(files);
  };
  const onError = useCallback(err => {
    let {log} = console;
    if (err.type === EMsgType.overLimit) {
      log('文件个数超出上限', err);
    }
    if (err.type === EMsgType.overSize) {
      log('文件体积超出上限',err);
    }
    if (err.type === EMsgType.networkFail) {
      log('网络出错', err);
    }
  }, []);

  const handleDelete = file => {
    let idx = files.findIndex(item => item.lid === file.lid);
    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} multiple>
          <button>上传</button>
        </Upload>
      </div>
      <h3>块式列表</h3>
      <FilePreview files={files} edit onDelete={handleDelete} />
      <h3>列表式:竖排</h3>
      <ListView files={files} edit onDelete={handleDelete} width="50%"/>
      <h3>列表式:横排</h3>
      <ListView files={files} edit onDelete={handleDelete} layout={EListLayout.horizontal}/>
    </div>
  );
}
3.3.55

6 years ago

3.3.53

6 years ago

3.3.54

6 years ago

3.3.51

6 years ago

3.3.52

6 years ago

3.3.50

6 years ago

3.3.47

6 years ago

3.3.48

6 years ago

3.3.46

6 years ago

3.3.43

6 years ago

3.3.45

6 years ago

3.3.41

6 years ago

3.3.42

6 years ago

3.3.39

6 years ago

3.3.38

6 years ago

3.3.35

6 years ago

3.3.36

6 years ago

3.3.37

6 years ago

3.3.31

6 years ago

3.3.32

6 years ago

3.3.33

6 years ago

3.3.34

6 years ago

3.3.25

6 years ago

3.3.26

6 years ago

3.3.27

6 years ago

3.3.28

6 years ago

3.3.29

6 years ago

3.3.24

6 years ago

3.3.23

6 years ago

3.3.22

6 years ago

3.3.21

6 years ago

3.3.20

6 years ago

3.3.19

6 years ago

3.3.18

6 years ago

3.3.17

6 years ago

3.3.16

6 years ago

3.3.15

6 years ago

3.3.14

6 years ago

3.3.13

6 years ago

3.3.12

6 years ago

3.3.11

6 years ago

3.3.10

6 years ago

3.3.9

6 years ago

3.3.8

6 years ago

3.3.7

6 years ago

3.3.6

6 years ago

3.3.5

6 years ago

3.2.80-beta.1

6 years ago

3.2.80

6 years ago

3.3.4

6 years ago

3.3.3

6 years ago

3.3.1

6 years ago

3.3.0

6 years ago

3.2.97

6 years ago

3.2.95

6 years ago

3.2.94

6 years ago

3.2.93

6 years ago

3.2.92

6 years ago

3.2.90

6 years ago

3.2.88

6 years ago

3.2.87

6 years ago

3.2.86

6 years ago

3.2.85

6 years ago

3.2.84

6 years ago

3.2.83

6 years ago

3.2.82

6 years ago

3.2.81

6 years ago

3.2.79

6 years ago

3.2.78

6 years ago

3.2.76

6 years ago

3.2.7-rc.1

6 years ago

3.2.74

6 years ago

3.2.73

6 years ago

3.2.69-beta.1

6 years ago

3.2.72

6 years ago

3.2.69

6 years ago

3.2.68

6 years ago

3.2.64-beta.1

6 years ago

3.2.63

6 years ago

3.2.61

6 years ago

3.2.60

6 years ago

3.2.59

6 years ago

3.2.54

6 years ago

3.2.47-beta.8

6 years ago

3.2.47-beta.7

6 years ago

3.2.53

6 years ago

3.2.52

6 years ago

3.2.51

6 years ago

3.2.47-beta.6

6 years ago

3.2.50

6 years ago

3.2.49

6 years ago

3.2.47-beta.4

6 years ago

3.2.47-beta.3

6 years ago

3.2.47-alpha.3

6 years ago

3.2.47-beta.2

6 years ago

3.2.47-alpha.2

6 years ago

3.2.48

6 years ago

3.2.47-beta.1

6 years ago

3.2.45-alpha.1

6 years ago

3.2.47

6 years ago

3.2.46

6 years ago

3.2.45-beta.1

6 years ago

3.2.45-beta.0

6 years ago

3.2.45

6 years ago

3.2.44-rc.4

6 years ago

3.2.44-rc.3

6 years ago

3.2.44-rc.2

6 years ago

3.2.44-rc.1

6 years ago

3.2.44

6 years ago

3.2.43

6 years ago

3.2.42

6 years ago

3.2.41

6 years ago

3.2.40

6 years ago

3.2.39

6 years ago

3.2.37

6 years ago

3.2.35

6 years ago

3.2.34

6 years ago

3.2.33

6 years ago

3.2.32

6 years ago

3.2.31

6 years ago

3.2.30

6 years ago

3.2.29

6 years ago

3.2.28

6 years ago

3.2.27

6 years ago

3.2.26

6 years ago

3.2.25

6 years ago

3.2.24

6 years ago

3.2.23

6 years ago

3.2.22

6 years ago

3.2.21

6 years ago

3.2.20

6 years ago

3.2.19

6 years ago

3.2.18

6 years ago

3.2.17

6 years ago

3.2.16

6 years ago

3.2.15

6 years ago

3.2.14

6 years ago

3.2.12

6 years ago

3.2.10

6 years ago

3.2.9

6 years ago

3.2.8

6 years ago

3.2.7

6 years ago

3.2.6

6 years ago

3.2.5

6 years ago

3.2.4

6 years ago

3.2.3

6 years ago

3.2.2

6 years ago

3.2.1

6 years ago

3.2.0

6 years ago

3.1.99

6 years ago

3.1.98

6 years ago

3.1.97

6 years ago

3.1.96

6 years ago

3.1.95

6 years ago

3.1.94

6 years ago

3.1.92

6 years ago

3.1.91

6 years ago

3.1.90

6 years ago

3.1.89

6 years ago

3.1.88

6 years ago

3.1.87

6 years ago

3.1.86

6 years ago

3.1.85

6 years ago

3.1.84

6 years ago

3.1.83

6 years ago

3.1.82

6 years ago

3.1.81

6 years ago

3.1.80

6 years ago

3.1.79

6 years ago

3.1.78

6 years ago

3.1.77

6 years ago

3.1.76

6 years ago

3.1.75

6 years ago

3.1.74

6 years ago

3.1.73

6 years ago

3.1.72

6 years ago

3.1.71

6 years ago

3.1.70

6 years ago

3.1.69

6 years ago

3.1.68

6 years ago

3.1.67

6 years ago

3.1.65

6 years ago

3.1.64

6 years ago

3.1.63

6 years ago

3.1.62

6 years ago

3.1.61

6 years ago

3.1.60

6 years ago

3.1.59

6 years ago

3.1.58

6 years ago

3.1.57

6 years ago

3.1.56

6 years ago

3.1.47

6 years ago

3.1.46

6 years ago

3.1.39

6 years ago

3.1.38

6 years ago

3.1.37

6 years ago

3.1.35

6 years ago

3.1.34

6 years ago

3.1.33

6 years ago

3.1.32

6 years ago

3.1.31

6 years ago

3.1.30

6 years ago

3.1.29

6 years ago

3.1.28

6 years ago

3.1.21

6 years ago

3.1.20

6 years ago

3.1.19

6 years ago

3.1.18

6 years ago

3.1.14

6 years ago

3.1.13

6 years ago

3.1.12

6 years ago

3.1.11

6 years ago

3.1.10

6 years ago

3.1.9

6 years ago

3.1.7

6 years ago

3.1.6

6 years ago

3.1.5

6 years ago

3.1.4

6 years ago

3.1.3

6 years ago

3.0.97

6 years ago

3.0.95

6 years ago

3.0.90

6 years ago

3.0.89

6 years ago

3.0.88

6 years ago

3.0.87

6 years ago

3.0.81

6 years ago

3.0.80

6 years ago

3.0.79

6 years ago

3.0.78

6 years ago

3.0.74

6 years ago

3.0.69

6 years ago

3.0.68

6 years ago

3.0.57

6 years ago

3.0.56

6 years ago

3.0.55

6 years ago

3.0.54

6 years ago

3.0.53

6 years ago

3.0.52

6 years ago

3.0.51

6 years ago

3.0.49

6 years ago

3.0.47

6 years ago

3.0.46

6 years ago

3.0.45

6 years ago

3.0.44

6 years ago

3.0.43

6 years ago

3.0.42

6 years ago

3.0.41

6 years ago

3.0.40

6 years ago

3.0.39

6 years ago

3.0.38

6 years ago

3.0.37

6 years ago

3.0.35

6 years ago

3.0.34

6 years ago

3.0.33

6 years ago

3.0.30

6 years ago

3.0.29

6 years ago

3.0.27

6 years ago

3.0.26-rc.1

6 years ago

3.0.26

6 years ago

3.0.25

6 years ago

3.0.24

6 years ago

3.0.23

6 years ago

3.0.22

6 years ago

3.0.20

6 years ago

3.0.19

6 years ago

3.0.18

6 years ago

3.0.17

6 years ago

3.0.16

6 years ago

3.0.3

6 years ago

3.0.1-rc.83

6 years ago

3.0.1-rc.82

6 years ago

3.0.1-rc.81

6 years ago

3.0.1-rc.80

6 years ago

3.0.1-rc.79

6 years ago

3.0.1-rc.78

6 years ago

3.0.1-rc.77

6 years ago

3.0.1-rc.75

6 years ago

3.0.1-rc.74

6 years ago

3.0.1-rc.73

6 years ago

3.0.1-rc.72

6 years ago

3.0.1-rc.71

6 years ago

3.0.1-rc.70

6 years ago

3.0.1-rc.69

6 years ago

3.0.1-rc.68

6 years ago

3.0.1-rc.67

6 years ago

3.0.1-rc.65

6 years ago

3.0.1-rc.64

6 years ago

3.0.1-rc.63

6 years ago

3.0.1-rc.61

6 years ago

3.0.1-rc.59

6 years ago

3.0.1-rc.58

6 years ago

3.0.1-rc.56

6 years ago

3.0.1-rc.54

6 years ago

3.0.1-rc.52

6 years ago

1.4.7

6 years ago

3.0.1-rc.47

6 years ago

1.4.6

6 years ago

3.0.1-rc.44

6 years ago

3.0.1-rc.42

6 years ago

3.0.1-rc.41

6 years ago

3.0.1-rc.40

6 years ago

3.0.1-rc.39

6 years ago

3.0.1-rc.38

6 years ago

3.0.1-rc.37

6 years ago

3.0.1-rc.36

6 years ago

3.0.1-rc.34

6 years ago

3.0.1-rc.32

6 years ago

3.0.1-rc.31

6 years ago

3.0.1-rc.30

6 years ago

3.0.1-rc.28

6 years ago

3.0.1-rc.25

6 years ago

3.0.1-rc.24

6 years ago

3.0.1-rc.22

6 years ago

3.0.1-rc.21

6 years ago

3.0.1-rc.19

6 years ago

3.0.1-rc.18

6 years ago

3.0.1-rc.16

6 years ago

3.0.1-rc.15

6 years ago

3.0.1-rc.12

6 years ago

3.0.1-rc.11

6 years ago

3.0.1-rc.10

6 years ago

3.0.1-rc.9

6 years ago

3.0.1-rc.7

6 years ago

3.0.1-rc.6

6 years ago

3.0.1-rc.5

6 years ago

3.0.1-rc.4

6 years ago

3.0.1-rc.1

6 years ago

3.0.0-rc.90

6 years ago

3.0.0-rc.86

6 years ago

3.0.0-rc.85

6 years ago

3.0.0-rc.84

6 years ago

3.0.0-rc.81

6 years ago

3.0.0-rc.78

6 years ago

3.0.0-rc.77

6 years ago

3.0.0-rc.76

6 years ago

3.0.0-rc.71

6 years ago

3.0.0-rc.70

6 years ago

3.0.0-rc.69

6 years ago

3.0.0-rc.68

6 years ago

3.0.0-rc.67

6 years ago

3.0.0-rc.65

6 years ago

3.0.0-rc.64

6 years ago

3.0.0-rc.62

6 years ago

3.0.0-rc.61

6 years ago

3.0.0-rc.59

6 years ago

3.0.0-rc.54

6 years ago

3.0.0-rc.47

6 years ago

3.0.0-rc.43

6 years ago

3.0.0-rc.42

6 years ago

3.0.0-rc.41

6 years ago

3.0.0-rc.38

6 years ago

3.0.0-rc.37

6 years ago

3.0.0-rc.35

6 years ago

3.0.0-rc.34

6 years ago

3.0.0-rc.33

6 years ago

3.0.0-rc.32

6 years ago

3.0.0-rc.31

6 years ago

3.0.0-rc.30

6 years ago

3.0.0-rc.29

6 years ago

1.4.4

6 years ago

3.0.0-rc.28

6 years ago

3.0.0-rc.27

6 years ago

3.0.0-rc.26

6 years ago

3.0.0-rc.25

6 years ago

3.0.0-rc.20

6 years ago

1.4.2

6 years ago

1.4.1

6 years ago

1.4.0

6 years ago

1.3.14

6 years ago

1.3.13

6 years ago

1.3.12

6 years ago

1.3.11

6 years ago

1.3.10

6 years ago

1.3.9

6 years ago

1.3.8

6 years ago

1.3.7

6 years ago

1.3.6

6 years ago

1.3.5

6 years ago

1.3.4

6 years ago

1.3.3

6 years ago

1.3.2

6 years ago

1.3.1

6 years ago

1.3.0

6 years ago

1.2.9

6 years ago

1.2.8

6 years ago

1.2.7

6 years ago

1.2.6

6 years ago

1.2.5

6 years ago

1.2.4

6 years ago

1.2.3

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.12

6 years ago

1.1.11

6 years ago