# Upload 上传

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/upload/freepass)
- 平台：PC
- 维护者：熊相超
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s5
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Upload]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component, createRef } from 'react';
import { Upload, SecretSelect, Button } from '@weapp/ui';

class UploadDemo extends Component<any> {

  uploadInsRef = createRef<any>()

  startUpload = () => {
    this.uploadInsRef?.current?.startUpload()
  }

  handleChange = (data: any) => {
    console.error(data)
  }

  render() {
    return (
      <div>
        <Upload
         
          multiple={true}
          uploadParams={{
            module: 'document'
          }}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 附件列表拖拽排序

```jsx
import { Component } from 'react';
import { Upload, UploadData, IFile, SecretSelect, SecretSelectValueType, Button } from '@weapp/ui';

// const { getAttachmentLocalSecurityInfo } = Upload;
const { getSecretLevelInfo } = SecretSelect;

const uploadParams = {
  module: 'document',
}

class UploadDemo extends Component<any> {

  state = {
    data: []
  }

  onChange = (data?: UploadData) => {
    this.setState({ data })
  }

  onSortEnd = (data: UploadData) => {
    console.error('onSortEnd', data)
  }

  render() {
    const { data } = this.state;
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <Upload
         
          data={data}
          sortable
          uploadParams={uploadParams}
          onChange={this.onChange}
          onSortEnd={this.onSortEnd}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 附件列表和上传按钮分离

```jsx
import React, { Component, ReactNode } from 'react';
import { Upload, UploadData, Icon, Portal, Button, Input, SelectOptionData, Dialog } from '@weapp/ui';
import { data } from '../mock';
const style = { width: '500px' }
const style1 = { width: '200px' }
const styleOut = { outline: '#E5E5E5 dashed 2px' }
const operateOptions = [
  [
    { id: 'custom1', content: '自定义按钮1', icon: "Icon-delete" },
    { id: 'custom2', content: '自定义按钮2', icon: "Icon-Account-security" },
    { id: 'custom3', content: '自定义按钮3', icon: "Icon-Advanced-search" },
  ], [
    { id: 'custom1', content: '自定义按钮1', icon: "Icon-delete" },
    { id: 'custom2', content: '自定义按钮2', icon: "Icon-Advanced-search" },
  ], [
    { id: 'custom1', content: '自定义按钮1', icon: "Icon-delete" },
    { id: 'custom2', content: '自定义按钮2', icon: "Icon-Account-security" },
    { id: 'custom3', content: '自定义按钮3', icon: "Icon-Advanced-search" },
  ]
];

class UploadDemo extends Component<any> {
  state = { data: data }
  uploadRef = React.createRef<any>()
  uploadedRef = React.createRef<HTMLDivElement>()
  uploadingRef = React.createRef<HTMLDivElement>()
  onChange = (data?: UploadData[]) => {
    console.error('onChange data', data)
    this.setState({ data })
  }
  onPaste = (e: any) => {
    console.log(e.clipboardData.items.length)
  }
  onUploading = (status: string) => {
    console.log(status)
  }
  renderUploadButton = (eventProps: any, inputDom: ReactNode) => {
    const { onClick, onPaste, ...restProps } = eventProps
    return <div {...restProps} style={styleOut}>
      <Button type="primary"
        onClick={onClick}
        {...restProps}
      >
        <Icon name="Icon-upload02" />
        {'自定义上传按钮'}
        {inputDom}
      </Button>
      <Input
        placeholder="粘贴上传"
        style={style1}
        onPaste={onPaste}
      />
      <span style={{ marginLeft: '20px' }}>(点击或拖拽上传)</span></div>
  }
  startUpload = () => {
    console.log(123, this.uploadRef.current)
    this.uploadRef.current?.startUpload()
  }
  onOptionClick = (value: string | SelectOptionData) => {
    console.log(value)
  }
  onError = (file: File, errorInfo: string, response?: any) => {
    console.log(file, errorInfo)
  }
  renderListUploaded = (data: UploadData[], instance: any, com: any) => {
    // this.setState({listUploaded:com})
    console.error('renderListUploaded', data)
    return <Portal
      getContainer={this.getUploadedContainer}
      retainContainer
    >{com}</Portal>
  }
  getUploadedContainer = () => {
    return this.uploadedRef.current || undefined
  }
  getUploadingContainer = () => {
    return this.uploadingRef.current || undefined
  }
  renderListUploading = (data: UploadData[], instance: any, com: any) => {
    console.error('renderListUploading', data)
    return <Portal
      getContainer={this.getUploadingContainer}
      retainContainer
    >{com}</Portal>
  }

  onBeforeOptionClick = (value: string | SelectOptionData, fileData: UploadData, fileIndex: number) => {
    if (value === 'edit') {
      console.error(`阻止 ${value} 的事件`)
      return false;
    }
    else if (value === 'preview') {
      alert(`自定义文件名称点击事件`)
      return false;
    }
  }

  operateButtonStyle = {
    marginLeft: -40
  }

  render() {
    const { data } = this.state;
    console.error('data', data)
    return (
      <div>
        <Upload
         
          wrappedComponentRef={this.uploadRef}
          data={data}
          onBeforeOptionClick={this.onBeforeOptionClick}
          onChange={this.onChange}
          sortable
          onUploading={this.onUploading}
          // maxCount={5}
          // maxSize={4}
          uploadParams={{
            module: 'document'
          }}
          onError={this.onError}
          operateOptions={operateOptions}
          onOptionClick={this.onOptionClick}
          renderListUploaded={this.renderListUploaded}
          renderListUploading={this.renderListUploading}
          // autoUpload={false}
          isDeleteConfirm
          operateButtonStyle={this.operateButtonStyle}
        />
        <div>
          <h4>已上传列表</h4>
          <div ref={this.uploadedRef}></div>
        </div>
        <div>
          <h4>上传中列表</h4>
          <div ref={this.uploadingRef}></div>
        </div>
      </div>
    );
  }
}

export default UploadDemo;
```

### 自定义文件列表

```jsx
import { Component, FC, useCallback, useState } from 'react';
import { Upload, UploadData, Icon, Input, ListData, Menu, MenuItemData } from '@weapp/ui';
// import { data } from '../mock';

const data = [{
  "fileid": "3084fdf1870089550592691",
  "name": "人员信息的副本2.xls",
  "extName": "xls",
  "size": 192621,
  "uploadTime": 2022,
  "img": true,
  "loadlink": "/papi/file/preview?fileId=3084187008955059269&type=redirect&imgFormat=small",
  "options": [
    {
      id: 'appeal',
      icon: 'Icon-download02',
      content: '申述'
    },
    {
      id: 'download',
      icon: 'Icon-download02',
      content: '下载'
    },
    {
      id: 'edit',
      icon: 'Icon-daily-o',
      content: '编辑'
    },
    {
      id: 'delete',
      icon: 'Icon-error02',
      content: '删除'
    },
    {
      id: 'preview',
      icon: 'Icon-download02',
      content: '预览'
    },
    {
      id: 'rename',
      icon: 'Icon-edit-o',
      content: '重命名',
      moreType: true
    },
    {
      id: 'version',
      icon: 'Icon-Unfinished-business',
      content: '历史版本',
      moreType: true
    },
    {
      id: 'reupload',
      icon: 'Icon-Left-refresh',
      content: '重新上传',
      moreType: true
    },
  ],
  "uid": "p12w59"
}]

const FileItem: FC<any> = ({ item, index, weId, eventProps }) => {
  const { onOptionClick, onEditName } = eventProps;
  const [showInput, setShowInput] = useState<boolean>(false);
  const [name, setName] = useState<string>(item.name)
  // 由于自定义了列表，因此重命名逻辑需要模块自行处理
  const onClickMore = useCallback((id: string, option: MenuItemData) => {
    if (id === 'rename') {
      setShowInput(true)
    } else {
      onOptionClick(option, item, index)
    }
  }, [onOptionClick, item, index])
  const handleReName = useCallback((v) => {
    setShowInput(false);
    onEditName(item, v)
  }, [onEditName, item])
  const handleChangeName = useCallback((v) => {
    setName(v);
  }, [])
  console.log('showInput', showInput)
  return (
    <div key={item.fileid} style={{ display: 'flex', height: '20px', alignItems: 'center' }}>
      <Icon name="Icon-Knowledge-document-o" />
      {!showInput && <span style={{ display: 'inline-block', width: '200px', marginLeft: '10px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.name}</span>}
      {showInput && <Input value={name} onChange={handleChangeName} onPressEnter={handleReName} />}
      <Menu
        type="select"
        selectType="iconOverlay"
        showSensitive
        data={item.options as MenuItemData[]}
        onItemClick={onClickMore}
      />
    </div>
  )
}

class UploadDemo extends Component<any> {
  state = { data: data }

  onChange = (data?: UploadData[]) => {
    console.log('handleChange', data)
    this.setState({ data })
  }

  renderListUploaded = (data: UploadData[], instance: any, com: any, eventProps: any) => {
    return <div>{
      data.map((item, index) => {
        return <FileItem key={item.fileid} item={item} index={index} eventProps={eventProps} weId={this.props.weId} />
      })
    }
    </div>
  }

  render() {
    return (
      <div>
        <Upload
         
          data={this.state.data}
          onChange={this.onChange}
          uploadParams={{
            module: 'document'
          }}
          renderListUploaded={this.renderListUploaded}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 拦截上传行为

beforeUpload 返回 false 或 Promise.reject 时，用于拦截上传行为;或者返回文件或被修改过的文件,可用于上传前对文件压缩,加密等

```jsx
import { Component } from 'react';
import { Upload, UploadData, Icon } from '@weapp/ui';
import { data } from '../mock';

class UploadDemo extends Component<any> {
  state = { data: data }

  onChange = (data?: UploadData[]) => {
    this.setState({ data })
  }

  renderListUploaded = (data: UploadData[], instance: any, com: any) => {
    return <div>{
      data.map((item) => {
        return <div key={item.fileid} style={{ display: 'flex', height: '20px', alignItems: 'center' }}>
          <Icon name="Icon-Knowledge-document-o" />
          <span style={{ display: 'inline-block', width: '200px', marginLeft: '10px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.name}</span>
        </div>
      })
    }
    </div>
  }
  beforeUpload = (file: File): Promise<void | File> => {
    return new Promise((rs, rj) => {
      // xxxxx
      rj()
    })
    // or return false
    // or return this.encryFile(file)
  }
  encryFile = (file: File) => {
    // 可以在这里对文件进行校验,压缩,加密等操作
    // return xxx
  }
  render() {
    return (
      <div>
        <Upload
         
          data={this.state.data}
          onChange={this.onChange}
          uploadParams={{
            module: 'document'
          }}
          beforeUpload={this.beforeUpload}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 自定义处理上传错误信息

```jsx
import { Component } from 'react';
import { Upload, UploadData, Dialog } from '@weapp/ui';
import { data } from '../mock';

class UploadDemo extends Component<any> {
  state = { data: data }

  onChange = (data?: UploadData[]) => {
    this.setState({ data })
  }

  onError = (file: File, errorInfo: string, response?: any) => {
    console.log(file, errorInfo)
    Dialog.message({
      type: 'error',
      content: errorInfo,
    })
  }
  render() {
    return (
      <div>
        <Upload
          data={this.state.data}
          onChange={this.onChange}
          uploadParams={{
            module: 'document'
          }}
          onError={this.onError}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 自定义上传按钮区域+粘贴上传

```jsx
import React, { Component, ReactNode } from 'react';
import { Upload, UploadData, Icon, Button, Input } from '@weapp/ui';
import { data } from '../mock';

const style = { width: '500px' }
const style1 = { width: '200px' }
const styleOut = { outline: '#E5E5E5 dashed 2px', position: 'relative', cursor: 'pointer' }
const styleBtn: any = { position: 'relative' }
class UploadDemo extends Component<any> {
  state = { data: data }
  onChange = (data?: UploadData[]) => {
    this.setState({ data })
  }
  onPaste = (e: any) => {
    console.log(e.clipboardData.items.length)
  }
  onUploading = (status: string) => {
    console.log(status)
  }
  renderUploadButton = (eventProps: any, inputDom: ReactNode) => {
    const { onPaste, onClick, ...restProps } = eventProps
    return <div {...restProps} style={styleOut}>
      <Button type="primary"
        onClick={onClick}
        style={styleBtn}
      >
        <Icon name="Icon-upload02" />
        {'自定义上传按钮'}
        {inputDom}
      </Button>
      <Input
        placeholder="粘贴上传"
        style={style1}
        onPaste={onPaste}
      />
      <span style={{ marginLeft: '20px', color: '#ccc', fontSize: '12px' }} onClick={onClick}>(点击或拖拽上传)</span></div>
  }

  operateButtonStyle = {
    marginLeft: 42
  }

  operateButtonStyle1 = {
    marginLeft: 4
  }
  render() {
    return (
      <div>
        <Upload
         
          data={this.state.data}
          uploadUrl="/file/upload"
          style={style}
          onChange={this.onChange}
          dragUpload
          renderUploadButton={this.renderUploadButton}
          operateButtonStyle={this.operateButtonStyle}
        />
        <Upload
          data={this.state.data}
          uploadUrl="/file/upload"
          style={style}
          onChange={this.onChange}
          limitType='png,jpg,jpeg'
          onUploading={this.onUploading}
          operateButtonStyle={this.operateButtonStyle1}
        ><Button>自定义按钮</Button></Upload>
        <Upload
                data={this.state.data}
                uploadUrl="/file/upload"
                style={style}
                onChange={this.onChange}
                limitType='png,jpg,jpeg'
                onUploading={this.onUploading}
                operateButtonStyle={this.operateButtonStyle1}
                showListUploaded={false}
                showListUploading={false}
        ><Button>自定义按钮不显示待上传和已上传列表</Button></Upload>
      </div>
    );
  }
}

export default UploadDemo;
```

### 拖拽上传

```jsx
import { Component } from 'react';
import { Upload, UploadData } from '@weapp/ui';
import { data } from '../mock';

const style = { width: '500px' }

class UploadDemo extends Component<any> {
  state = { data: data }
  onChange = (data?: UploadData[]) => {
    this.setState({ data })
  }

  render() {
    return (
      <div>
        <div>
          <Upload
           
            data={this.state.data}
            style={style}
            onChange={this.onChange}
            sortable
            dragUpload
            uploadParams={{
              module: 'document'
            }}
          />
        </div>
        <div>
          <Upload
           
            data={this.state.data}
            style={style}
            onChange={this.onChange}
            sortable
            uploadParams={{
              module: 'document'
            }}
          />
        </div>
      </div>
    );
  }
}

export default UploadDemo;
```

### 粘贴上传

```jsx
import { Component } from 'react';
import { AnyObj, IFile, ListData, Upload, UploadData } from '@weapp/ui';
import { data } from '../mock';
import list from '../../share/mb/list';

class UploadDemo extends Component<any> {

  onAdd = (files: IFile[], listB: IFile[]) => {
    console.error('onAdd', files, listB)
  }

  onSuccess = (fileInfo: IFile, successInfo: string, response?: any, data?: UploadData | undefined) => {
    console.error('onSuccess', fileInfo, successInfo, response, data);
  }

  onError = (fileInfo: IFile, errorInfo: string, response?: any) => {
    console.error('onError', fileInfo, errorInfo, response);
  }

  onFilesAdded = (listB: ListData[]) => {
    console.error('onFilesAdded', listB);
  }

  onUploading = (status: string, listT: UploadData[], listB: ListData[]) => {
    console.error('onUploading', status, listT, listB);
  }

  onStart = (file: IFile) => {
    console.error('onStart', file);
  }

  getShowListData = (listUploaded: UploadData[], listUploading: ListData[]) => {
    console.error('getShowListData', listUploaded, listUploading);
  }

  onUploadCancle = (item: UploadData, listT: UploadData[], listB: ListData[]) => {
    console.error('onUploadCancle', item, listT, listB);
  }

  onUploadComplete = (successFiles: UploadData[], failedFiles: UploadData[], total?: number, otherParams?: AnyObj) => {
    console.error('onUploadComplete', successFiles, failedFiles, total, otherParams);
  }

  onUploadFinally = () => {
    console.error('onUploadFinally')
  }

  batchUploadCompleted = (successFiles: IFile[], failedFiles: IFile[], total?: number) => {
    console.error('batchUploadCompleted', successFiles, failedFiles, total);
  }

  onChange = (listT?: UploadData[], listB?: UploadData[], reUpload?: boolean) => {
    console.error('onChange', listT, listB, reUpload);
  }

  render() {
    return (
      <div>
        <h3>粘贴上传</h3>
        <Upload
         
          sortable
          dragUpload
          uploadParams={{
            module: 'document'
          }}
          pasteUpload
          onAdd={this.onAdd}
          onSuccess={this.onSuccess}
          onError={this.onError}
          onStart={this.onStart}
          getShowListData={this.getShowListData}
          onFilesAdded={this.onFilesAdded}
          onUploadCancle={this.onUploadCancle}
          onUploadComplete={this.onUploadComplete}
          onUploadFinally={this.onUploadFinally}
          onUploading={this.onUploading}
          batchUploadCompleted={this.batchUploadCompleted}
          onChange={this.onChange}
        />
        <h3>粘贴上传（图片）</h3>
        <Upload
         
          sortable
          dragUpload
          uploadParams={{
            module: 'document'
          }}
          pasteUpload
          buttonType='image'
          qrcodeUrl={'/ui/upload'}
          onAdd={this.onAdd}
          onSuccess={this.onSuccess}
          onError={this.onError}
          onStart={this.onStart}
          getShowListData={this.getShowListData}
          onFilesAdded={this.onFilesAdded}
          onUploadCancle={this.onUploadCancle}
          onUploadComplete={this.onUploadComplete}
          onUploadFinally={this.onUploadFinally}
          onUploading={this.onUploading}
          batchUploadCompleted={this.batchUploadCompleted}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 图片上传

```jsx
import { Component, ReactNode, CSSProperties, ReactText } from 'react';
import { Upload, UploadData, Icon, Button, Input, Switch } from '@weapp/ui';
import {imgData, imgDeletedData} from '../mock';

const style = { width: '100%' }
const style1 = { width: '200px' }
const styleOut = { outline: '#E5E5E5 dashed 2px' }

const uploadParams = {
  module: 'document'
}
const divStyle: CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  flexWrap: 'wrap'
}

const bodyStyle: CSSProperties = {
  width: '100%',
  display: 'flex',
  whiteSpace: 'nowrap',
  alignItems: 'center'
}

class UploadDemo extends Component<any> {
  state = {data: imgData, imgHeight: 100, imgWidth: 100, isCompressImg: false, listT: imgDeletedData}
  onChange = (data?: UploadData[]) => {
    this.setState({ data })
  }
  renderUploadButton = (eventProps: any, inputDom: ReactNode) => {
    const { onClick, onPaste, ...restProps } = eventProps
    return <div {...restProps} style={styleOut}>
      <Button type="primary"
        onClick={onClick}
        {...restProps}
      >
        <Icon name="Icon-upload02" />
        {'自定义上传按钮'}
        {inputDom}
      </Button>
      <Input
        placeholder="粘贴上传"
        style={style1}
        onPaste={onPaste}
      />
      <span style={{ marginLeft: '20px', color: '#ccc', fontSize: '12px' }}>(点击或拖拽上传)</span></div>
  }
  onUploading = (status: any) => {
    console.log('onUploading', status)
  }
  imgHeightChange = (imgHeight: ReactText) => {
    this.setState({ imgHeight: Number(imgHeight) })
  }
  imgWidthChange = (imgWidth: ReactText) => {
    this.setState({ imgWidth: Number(imgWidth) })
  }
  isCompressImgChange = (isCompressImg: boolean) => {
    this.setState({ isCompressImg })
  }
  handleChange = (listT?: UploadData[]) => {
    this.setState({ listT })
  }
  render() {
    const { imgHeight, imgWidth, isCompressImg, listT } = this.state;
    return (
      <div>
        <div style={divStyle}>
          <div style={bodyStyle}><span>图片高度：</span><Input value={imgHeight}
            onChange={this.imgHeightChange} /></div>
          <div style={bodyStyle}><span>图片宽度：</span><Input value={imgWidth}
            onChange={this.imgWidthChange} /></div>
          <div style={bodyStyle}><span>压缩图片：</span> <Switch
            value={isCompressImg}
            onChange={this.isCompressImgChange}></Switch></div>
        </div>
        <h3>图片上传 - 图片列表横向</h3>
        <Upload
         
          listType="img"
          buttonType="image"
          imgListType="horizontal"
          isCompressImg={isCompressImg}
          style={style}
          imgWidth={imgWidth}
          imgHeight={imgHeight}
          uploadParams={uploadParams}
        // limitType='png,jpg,jpeg'
        />
        <h3>图片上传 - 图片列表纵向</h3>
        <Upload
         
          listType="img"
          buttonType="image"
          imgListType="vertical"
          isCompressImg={isCompressImg}
          style={style}
          uploadParams={uploadParams}
          imgWidth={imgWidth}
          imgHeight={imgHeight}
          // limitType='png,jpg,jpeg'
        />
        <h4>Tips: 按钮和图片一行显示支持拖拽排序功能，但是折行的对齐方式会有些差异</h4>
        <Upload
         
          listType="img"
          buttonType="image"
          isCompressImg={isCompressImg}
          isUpdaterLineOfRow
          sortable={true}
          uploadParams={uploadParams}
          style={style}
          imgWidth={imgWidth}
          imgHeight={imgHeight}
          limitType='png,jpg,jpeg'
        />
        <h3>图片列表横向 - 已删除状态展示</h3>
        <Upload
         
          listType="img"
          buttonType="image"
          imgListType="horizontal"
          uploadParams={uploadParams}
          style={style}
          imgWidth={imgWidth}
          imgHeight={imgHeight}
          data={listT}
          sortable={true}
          onChange={this.handleChange}
        />
        <h3>图片列表纵向 - 已删除状态展示</h3>
        <Upload
         
          listType="img"
          buttonType="image"
          imgListType="vertical"
          uploadParams={uploadParams}
          style={style}
          imgWidth={imgWidth}
          imgHeight={imgHeight}
          data={listT}
          sortable={true}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 手动上传

```jsx
import React, { Component } from 'react';
import { Upload, UploadData, Button, MListData, IFile } from '@weapp/ui';
import { data } from '../mock';

const style = { width: '500px' }

class UploadDemo extends Component<any, any> {
  state = { data: data, uploadingData: [], uploadingDataIns: [] }
  uploadInsRef = React.createRef<any>()
  uploadInstance: any

  editSec = () => {
    const { uploadingData } = this.state;
    let _uploadingData = uploadingData.map((item: any) => {
      item.secretLevel = (Number(item?.secretLevel || 0) + 1).toString();
      if (item.secretLevel === '1') {
        item.secretLevelValidity = '20年'
      } else if (item.secretLevel === '2') {
        item.secretLevelValidity = '10个月'
      } else {
        delete item.secretLevelValidity;
      }
      return item;
    });
    console.log('_uploadingData', _uploadingData)
    this.setState({ uploadingData: _uploadingData })
  }
  editSec2 = () => {
    const { uploadingData } = this.state;
    let _uploadingData = uploadingData.map((item: any) => {
      item.secretLevel = (Number(item.secretLevel) - 1).toString();
      if (item.secretLevel === '1') {
        item.secretLevelValidity = '20年'
      } else if (item.secretLevel === '2') {
        item.secretLevelValidity = '10个月'
      } else {
        delete item.secretLevelValidity;
      }
      return item;
    });
    console.log('_uploadingData', _uploadingData)
    this.setState({ uploadingData: _uploadingData })
  }
  startUpload = () => {
    console.log(123, this.uploadInsRef.current)
    this.uploadInsRef?.current?.startUpload()
  }
  chooseFile = () => {
    this.uploadInsRef?.current?.uploaderRef?.onClick()
  }
  chooseFile1 = () => {
    this.uploadInstance?.onClick()
  }
  deleteUploading = () => {
    this.setState({ uploadingData: [] })
  }
  deleteUploading1 = () => {
    this.setState({ uploadingDataIns: [] })
  }

  onChange = (data?: UploadData[], listB?: any[]) => {
    console.log('listB', listB)
    this.setState({ data, uploadingData: listB })
  }
  onDelete = (item: UploadData, listT: UploadData[], listB: MListData[]) => {
    console.log('listB', listB)
    this.setState({ data, uploadingData: listB })
  }
  getShowListData = (listUploaded: UploadData[], listUploading: MListData[]) => {
    console.log(listUploaded, listUploading)
  }
  onUploading = (status: string, listT: UploadData[], listB: MListData[]) => {
    console.log('onUploading status', status, listT, listB)
  }
  onError = (fileInfo: IFile, errorInfo: string, response?: any) => {
    console.error('upload error', fileInfo, errorInfo, response)
  }
  onSuccess = (fileInfo: IFile, successInfo: string, response?: any) => {
    console.info('upload success', fileInfo, successInfo, response)
  }

  getInstance = (uploadInstance: any) => {
    this.uploadInstance = uploadInstance;
  }
  onChangeIns = (data?: UploadData[], listB?: any[]) => {
    console.log('listB', listB)
    this.setState({ data, uploadingDataIns: listB })
  }
  startUpload1 = () => {
    console.log(this.uploadInstance)
    this.uploadInstance?.startUpload()
  }
  render() {
    return (
      <div>
        <Button onClick={this.startUpload}>上传到服务器</Button>
        <div style={{ height: '20px' }}></div>
        <Button onClick={this.chooseFile}>选择文件</Button>
        <div style={{ height: '20px' }}></div>
        <Button onClick={this.editSec}>修改密级 +1</Button>
        <div style={{ height: '20px' }}></div>
        <Button onClick={this.editSec2}>修改密级 -1</Button>
        <div style={{ height: '20px' }}></div>
        <Button onClick={this.deleteUploading}>移除待上传文件</Button>
        <h2>Ref 方式</h2>
        <Upload
                wrappedComponentRef={this.uploadInsRef}
                style={style}
                uploadingData={this.state.uploadingData}
                onChange={this.onChange}
                onError={this.onError}
                onSuccess={this.onSuccess}
                autoUpload={false}
          // getShowListData={this.getShowListData}
                uploadParams={{
                  module: 'document'
                }}
          // secretProtect
          // secretLevel={'1'}
          // secretLevelValidity={'10月'}
                onUploading={this.onUploading}
        >
        </Upload>
        <h2>实例方式</h2>
        <Button onClick={this.chooseFile1}>选择文件(uploadInstance)</Button>
        <div style={{ height: '20px' }}></div>
        <Button onClick={this.startUpload1}>上传到服务器(uploadInstance)</Button>
        <div style={{ height: '20px' }}></div>
        <Button onClick={this.deleteUploading1}>移除待上传文件(uploadInstance)</Button>
        <div style={{ height: '20px' }}></div>
        <Upload
          // data={this.state.data}
          // uploadUrl="/file/upload"
                style={style}
                uploadingData={this.state.uploadingDataIns}
                onChange={this.onChangeIns}
                autoUpload={false}
                uploadParams={{
                  module: 'document'
                }}
                getInstance={this.getInstance}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 自定义操作按钮

```jsx
import React, { Component } from 'react';
import { Upload, UploadData, SelectOptionData, Input, Button, Tag } from '@weapp/ui';
import { data, uploadingdata2 } from '../mock';

const operateOptions = [
  [
    { id: 'custom1', content: '自定义1', icon: "Icon-delete" },
    { id: 'custom2', content: '自定义2', icon: "Icon-Account-security" },
    { id: 'custom3', content: '自定义3', icon: "Icon-Advanced-search" },
  ], [
    { id: 'custom1', content: '自定义1', icon: "Icon-delete" },
    { id: 'custom2', content: '自定义2', icon: "Icon-Advanced-search" },
  ], [
    { id: 'custom1', content: '自定义1', icon: "Icon-delete" },
    { id: 'custom2', content: '自定义2', icon: "Icon-Account-security" },
    { id: 'custom3', content: '自定义3', icon: "Icon-Advanced-search" },
  ]
];

const optionsMap = [
  {
    id: 'delete',
    content: '删除附件'
  },
  {
    id: 'edit',
    content: '编辑附件'
  },
  {
    id: 'preview',
    content: '预览附件'
  },
  {
    id: 'download',
    content: '下载附件'
  },
  {
    id: 'version',
    content: '查看历史版本'
  },
  {
    id: 'reupload',
    content: '替换附件'
  },
  {
    id: 'editSecLevel',
    content: '修改密级'
  },
  {
    id: 'appeal',
    content: '申述'
  },
  {
    id: 'sign',
    content: '发起签署'
  },
  {
    id: 'signFirst',
    content: '对方先签'
  },
  {
    id: 'signBack',
    content: '退回签署'
  },
  {
    id: 'share',
    content: '签署链接'
  },
  {
    id: 'signinv',
    content: '作废签署'
  },
  {
    id: 'apply',
    content: '申请签署'
  },
]
const uploadingOptionsMap = [{
  id: 'delete',
  content: '删除附件'
}, {
  id: 'editSecLevel',
  content: '修改密级'
}]
class UploadDemo extends Component<any> {

  uploadInsRef = React.createRef<any>()

  state = {
    data: data,
    uploadingData: uploadingdata2,
    uploadedOptionsWhitesStr: '',
    uploadedOptionsBlacksStr: '',
    uploadingOptionsWhitesStr: '',
    uploadingOptionsBlacksStr: ''
  }

  onChange = (data?: UploadData[], uploadingData?: any[]) => {
    this.setState({ data, uploadingData })
  }

  onOptionClick = (value: string | SelectOptionData) => {
    console.log(value)
  }

  onWhiteChange = (value: React.ReactText) => {
    this.setState({ uploadedOptionsWhitesStr: value });
  }
  onBlackChange = (value: React.ReactText) => {
    this.setState({ uploadedOptionsBlacksStr: value });
  }
  onUploadingWhiteChange = (value: React.ReactText) => {
    this.setState({ uploadingOptionsWhitesStr: value });
  }
  onUploadingBlackChange = (value: React.ReactText) => {
    this.setState({ uploadingOptionsBlacksStr: value });
  }
  startUpload = () => {
    this.uploadInsRef?.current?.startUpload()
  }

  render() {
    const { data, uploadingData, uploadedOptionsBlacksStr, uploadedOptionsWhitesStr, uploadingOptionsBlacksStr, uploadingOptionsWhitesStr } = this.state;
    const uploadedOptionsBlacks = uploadedOptionsBlacksStr.split(',');
    const uploadedOptionsWhites = uploadedOptionsWhitesStr.split(',');
    const uploadingOptionsBlacks = uploadingOptionsBlacksStr.split(',');
    const uploadingOptionsWhites = uploadingOptionsWhitesStr.split(',');
    return (
      <div>
        <h3>已上传操作按钮白名单</h3>
        <Input value={uploadedOptionsWhitesStr} onChange={this.onWhiteChange} placeholder='填写已上传操作按钮白名单,逗号分隔' />
        <h3>已上传操作按钮黑名单</h3>
        <Input value={uploadedOptionsBlacksStr} onChange={this.onBlackChange} placeholder='填写已上传操作按钮黑名单,逗号分隔' />
        <p>
          常用操作配置：
        </p>
        <div>
          {optionsMap.map(item => {
            return <Tag key={item.id} radius style={{
              margin: 4
            }}>
              {item.content}: {item.id}
            </Tag>
          })}
        </div>
        <h3>待上传操作按钮白名单</h3>
        <Input value={uploadingOptionsWhitesStr} onChange={this.onUploadingWhiteChange} placeholder='填写待上传操作按钮白名单,逗号分隔' />
        <h3>待上传操作按钮黑名单</h3>
        <Input value={uploadingOptionsBlacksStr} onChange={this.onUploadingBlackChange} placeholder='填写待上传操作按钮黑名单,逗号分隔' />
        <p>
          常用操作配置：
        </p>
        <div>
          {uploadingOptionsMap.map(item => {
            return <Tag key={item.id} radius style={{
              margin: 4
            }}>
              {item.content}: {item.id}
            </Tag>
          })}
        </div>
        <Upload
         
          data={data}
          uploadingData={uploadingData}
          uploadUrl="/file/upload"
          onChange={this.onChange}
          uploadParams={{
            module: 'document'
          }}
          wrappedComponentRef={this.uploadInsRef}
          autoUpload={false}
          secretProtect
          secretLevel='1'
          operateOptions={operateOptions}
          uploadedOptionsBlacks={uploadedOptionsBlacksStr ? uploadedOptionsBlacks : undefined}
          uploadedOptionsWhites={uploadedOptionsWhitesStr ? uploadedOptionsWhites : undefined}
          uploadingOptionsBlacks={uploadingOptionsBlacksStr ? uploadingOptionsBlacks : undefined}
          uploadingOptionsWhites={uploadingOptionsWhitesStr ? uploadingOptionsWhites : undefined}
          onOptionClick={this.onOptionClick}
        />
        <Button onClick={this.startUpload}>触发上传</Button>
      </div>
    );
  }
}

export default UploadDemo;
```

### 单独调用附件列表

```jsx
import React, { Component } from 'react';
import { Upload, UploadData, SelectOptionData } from '@weapp/ui';
import { data } from '../mock';

const { FileList } = Upload
class UploadDemo extends Component<any> {
  state = { data: data }
  onChange = (data?: UploadData[]) => {
    this.setState({ data })
  }

  onOptionClick = (value: string | SelectOptionData) => {
    console.log(value)
  }
  render() {
    return (
      <div>
        <FileList
         
          data={this.state.data}
          onChange={this.onChange}
          sortable
          uploadParams={{
            module: 'document'
          }}
          onOptionClick={this.onOptionClick}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 显示完整文件名

```jsx
import React, { Component } from 'react';
import { Upload, UploadData } from '@weapp/ui';
import { data } from '../mock';

class UploadDemo extends Component<any> {
  state = { data: data }
  onChange = (data?: UploadData[]) => {
    this.setState({ data })
  }
  render() {
    return (
      <div>
        <Upload
         
          data={this.state.data}
          onChange={this.onChange}
          uploadParams={{
            module: 'document'
          }}
          wrap
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 暂存文件后，点击确定再上传

```jsx
import React, { Component } from 'react';
import { Upload, UploadData, SelectOptionData, MListData, Button, Input } from '@weapp/ui';
import { data } from '../mock';

const { FileList } = Upload;
class UploadDemo extends Component<any> {
  state = { data: data, readOnly: true }
  uploadInsRef = React.createRef<any>()

  getUploadInsRed = (el: any) => {
    console.log('getUploadInsRed')
    console.log('el', el)
    this.uploadInsRef = el
  }

  onChange = (data?: UploadData[]) => {
    console.log('已上传的文件', JSON.parse(JSON.stringify(data)))
    this.setState({ data })
  }
  onUploading = (status: string, listT: UploadData[], listB: MListData[]) => {
    console.log('onUploading', status, listT, listB)
  }

  onOptionClick = (value: string | SelectOptionData) => {
    console.log(value)
  }
  getShowListData = (listUploaded: UploadData[], listUploading: MListData[]) => {
    console.log(listUploaded, listUploading)
  }
  setReadOnly = () => {
    this.setState({
      readOnly: !this.state.readOnly
    }, () => {
      console.log(this.state.readOnly)
    })
  }
  onError = (a: any, b: any, c: any) => {
    console.log(a, b, c)
  }
  sureUpload = () => {
    console.log('this.uploadInsRef', this.uploadInsRef);
    (this.uploadInsRef as any)?.startUpload()
  }
  componentDidMount() {
    console.log('this.uploadInsRef', this.uploadInsRef.current)
  }
  render() {
    const { readOnly } = this.state;

    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <Upload
          wrappedComponentRef={this.getUploadInsRed}
         
          data={this.state.data}
          // uploadingData={this.state.data}
          onChange={this.onChange}
          // readOnly
          autoUpload={false}
          // disabled
          uploadParams={{
            module: 'document',
            refId: '3572398710971206946'
          }}
          showBatchSign
        />
        <Button
         
          type='primary'
          onClick={this.sureUpload}
        >
          确定上传
        </Button>
      </div>
    );
  }
}

export default UploadDemo;
```

### 简易模式

```jsx
import React, { Component } from 'react';
import { Upload, UploadData, SelectOptionData, MListData, ListData, IFile } from '@weapp/ui';
import { data } from '../mock';
class UploadDemo extends Component<any> {
  state = { data: data, readOnly: true }
  uploadInsRef = React.createRef<any>()

  getUploadInsRed = (el: any) => {
    console.log('getUploadInsRed')
    console.log('el', el)
    this.uploadInsRef = el
  }

  onChange = (data?: UploadData[]) => {
    console.log('已上传的文件', JSON.parse(JSON.stringify(data)))
    this.setState({ data })
  }
  onDelete = (item: UploadData, listT: UploadData[], listB: ListData[]) => {
    console.log('删除后文件列表', JSON.parse(JSON.stringify(item)))
    console.log('删除后文件列表', listT)
    console.log('删除后文件列表', listB)
    console.log('删除后文件列表', data)
  }
  onUploading = (status: string, listT: UploadData[], listB: MListData[]) => {
    console.log('onUploading', status, listT, listB)
  }

  onOptionClick = (value: string | SelectOptionData) => {
    console.log(value)
  }
  getShowListData = (listUploaded: UploadData[], listUploading: MListData[]) => {
    console.log(listUploaded, listUploading)
  }
  setReadOnly = () => {
    this.setState({
      readOnly: !this.state.readOnly
    }, () => {
      console.log(this.state.readOnly)
    })
  }
  onError = (a: any, b: any, c: any) => {
    console.log(a, b, c)
  }
  sureUpload = () => {
    console.log('this.uploadInsRef', this.uploadInsRef)
    console.log('uploadInsRef', this.uploadInsRef.current)
  }
  componentDidMount() {
    console.log('this.uploadInsRef', this.uploadInsRef.current)
  }
  onSuccess = (file: IFile, errorInfo: string, response?: any) => {
    console.log('onSuccess', file, errorInfo, response)
  }
  render() {
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <Upload
          ref={this.getUploadInsRed}
         
          data={this.state.data}
          onChange={this.onChange}
          uploadParams={{
            module: 'document',
            refId: '3572398710971206946'
          }}
          type={'simple'}
          showBatchSign
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 免登录上传（预览、下载）

```jsx
import { Component } from 'react';
import { Switch, Upload } from '@weapp/ui';
import { data } from '../mock';

const uploadParams = {
  module: 'document',
}
class UploadDemo extends Component<any> {

  state = {
    data: data,
    loginFree: false
  }
  onClose = (files: any) => {
    console.log('files', files)
    this.setState({ visible: false })
  }
  onChange = (visible: boolean) => {
    this.setState({ loginFree: visible })
  }

  render() {
    const { loginFree } = this.state;
    // 免登陆接口要求必须传递 tenantKey，但此时客户没有登陆，所有取不到 tenantKey，可以随便传递一个值，后端不做校验
    const uploadParams = loginFree ? { module: 'document', tenantKey: 'all_teams' } : { module: 'document' }
    return (
      <div>
        <Switch value={loginFree} onChange={this.onChange}>{loginFree ? '免登陆' : '非免登陆'}</Switch>
        <h3>{loginFree ? '免登陆' : '非免登陆'}上传文件</h3>
        <Upload
          uploadParams={uploadParams}
          loginFree={loginFree}
          batchDelete
          batchDownload
          showBatchSign
        />
        <h3>{loginFree ? '免登陆' : '非免登陆'}上传图片</h3>
        <Upload
          uploadParams={uploadParams}
          loginFree={loginFree}
          buttonType={'image'}
          listType={'img'}
          limitType={'png,jpg'}
          batchDelete
          batchDownload
          showBatchSign
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 待上传文件操作配置

```jsx
import React, { Component } from 'react';
import { Upload, UploadData, SelectOptionData, MListData, ListData, IFile, UploadOptionType } from '@weapp/ui';
import { data, appealData, uploadingdata, uploadingOptions, uploadingdata2 } from '../mock';

class UploadDemo extends Component<any> {
  state = { data: data, readOnly: true }
  uploadInsRef = React.createRef<any>()

  
  getUploadInsRed = (el: any) => {
    this.uploadInsRef = el
  }

  onChange = (listT?: UploadData[], listB?: UploadData[]) => {
    this.setState({ data })
  }
  setReadOnly = () => {
    this.setState({
      readOnly: !this.state.readOnly
    })
  }
  onUploadingOptionClick = (value: string | SelectOptionData) => {
    console.log('onUploadingOptionClick',value)
  }
  onBeforeUploadingOptionClick= (value: string | SelectOptionData) => {
    console.log('onBeforeUploadingOptionClick',value)
  }
  render() {
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <h3>待上传列表配置 - uploadingOptions</h3>
        <Upload
          ref={this.getUploadInsRed}
         
          onChange={this.onChange}
          uploadParams={{
            module: 'document'
          }}
          showBatchSign
          timeout={50000}
          // 附件密级接口
          secretProtect  // 开启附件密级保护
          secretLevel={'3'}  // 设置附件密级信息
          secretConfim  // 开启附件密级校验确认框
          secretLevelDialogProps={{
            title: '请先指定文件密级'
          }}
          uploadingOptions={uploadingOptions as UploadOptionType[]}
          uploadingData={uploadingdata2}
          onUploadingOptionClick={this.onUploadingOptionClick}
          onBeforeUploadingOptionClick={this.onBeforeUploadingOptionClick}
        />
        <h3>待上传列表配置 - item.options</h3>
        <Upload
          ref={this.getUploadInsRed}
         
          onChange={this.onChange}
          uploadParams={{
            module: 'document'
          }}
          showBatchSign
          timeout={50000}
          // 附件密级接口
          secretProtect  // 开启附件密级保护
          secretLevel={'3'}  // 设置附件密级信息
          secretConfim  // 开启附件密级校验确认框
          secretLevelDialogProps={{
            title: '请先指定文件密级'
          }}
          uploadingData={uploadingdata}
          onUploadingOptionClick={this.onUploadingOptionClick}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 复写 title

```jsx
import React, { Component } from 'react';
import { Upload, UploadData, SelectOptionData, MListData, ListData, IFile, UploadOptionType, Icon } from '@weapp/ui';
import { data, appealData, uploadingdata, uploadingOptions, uploadingdata2 } from '../mock';
import { AnyObj } from '../../../../types/common';
class UploadDemo extends Component<any> {
  state = { data: data, readOnly: true }
  uploadInsRef = React.createRef<any>()

  getUploadInsRed = (el: any) => {
    this.uploadInsRef = el
  }

  onChange = (listT?: UploadData[], listB?: UploadData[]) => {
    this.setState({ data })
  }
  setReadOnly = () => {
    this.setState({
      readOnly: !this.state.readOnly
    })
  }
  renderUploadingContentL = (item: UploadData, otherParams: AnyObj) => {
    return (
      <>
        <div>
          <Icon name={otherParams.icon}></Icon>
          {item?.name}(自定义渲染)
          <button>自定义渲染</button>
          {item.secretLevelValidity}
        </div>
      </>
    )
  }
  renderUploadingContentR = (item: UploadData, otherParams: AnyObj) => {
    return (
      <>
        <div>
          <Icon name={otherParams.icon}></Icon>
          <button>自定义渲染右侧</button>
        </div>
      </>
    )
  }
  renderUploadingTitle = (item: UploadData) => {
    return (
      <>
        <div>
          {item.name}1111
        </div>
      </>
    )
  }
  render() {
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <h3>待上传列表配置 - uploadingOptions</h3>
        <Upload
          ref={this.getUploadInsRed}
         
          onChange={this.onChange}
          uploadParams={{
            module: 'document'
          }}
          showBatchSign
          timeout={50000}
          // 附件密级接口
          secretProtect  // 开启附件密级保护
          secretLevel={'3'}  // 设置附件密级信息
          secretConfim  // 开启附件密级校验确认框
          secretLevelDialogProps={{
            title: '请先指定文件密级'
          }}
          uploadingOptions={uploadingOptions as UploadOptionType[]}
          uploadingData={uploadingdata2}
          renderUploadingContentL={this.renderUploadingContentL}
          renderUploadingContentR={this.renderUploadingContentR}
        />
        <h3>待上传列表配置 - item.options</h3>
        <Upload
          ref={this.getUploadInsRed}
         
          onChange={this.onChange}
          uploadParams={{
            module: 'document'
          }}
          showBatchSign
          timeout={50000}
          // 附件密级接口
          secretProtect  // 开启附件密级保护
          secretLevel={'3'}  // 设置附件密级信息
          secretConfim  // 开启附件密级校验确认框
          secretLevelDialogProps={{
            title: '请先指定文件密级'
          }}
          uploadingData={uploadingdata}
          renderUploadingTitle={this.renderUploadingTitle}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 调整附件参数名称

```jsx
import React, { Component } from 'react';
import { Upload, UploadData, SelectOptionData, MListData, ListData, IFile, Input } from '@weapp/ui';
import { data } from '../mock';
class UploadDemo extends Component<any> {
  state = { data: data, readOnly: true, fileDataName: '' }
  uploadInsRef = React.createRef<any>()

  onChange = (listT?: UploadData[], listB?: UploadData[]) => {
    console.log('onChange', listT, listB)
    this.setState({ data })
  }
  onDelete = (item: UploadData, listT: UploadData[], listB: ListData[]) => {
    console.log('删除后文件列表', JSON.parse(JSON.stringify(item)))
    console.log('删除后文件列表', listT)
    console.log('删除后文件列表', listB)
    console.log('删除后文件列表', data)
  }
  onOptionClick = (value: string | SelectOptionData) => {
    console.log(value)
  }
  getShowListData = (listUploaded: UploadData[], listUploading: MListData[]) => {
    console.log(listUploaded, listUploading)
  }
  setReadOnly = () => {
    this.setState({
      readOnly: !this.state.readOnly
    }, () => {
      console.log(this.state.readOnly)
    })
  }
  onError = (fileInfo: IFile, errorInfo: string, response?: any) => {
    console.error('fileInfo', fileInfo)
    console.error('errorInfo', errorInfo)
    console.error('response', response)
  }
  sureUpload = () => {
    console.log('this.uploadInsRef', this.uploadInsRef)
    console.log('uploadInsRef', this.uploadInsRef.current)
  }
  componentDidMount() {
    console.log('this.uploadInsRef', this.uploadInsRef.current)
  }
  onSuccess = (file: IFile, errorInfo: string, response?: any) => {
    console.log('onSuccess', file, errorInfo, response)
  }
  onUploading = (status: string, listT: UploadData[], listB: MListData[]) => {
    console.log('onUploading status', status, listT, listB)
  }
  handleInputChange = (value: React.ReactText) => {
    this.setState({
      fileDataName: value
    })
  }
  render() {
    const { fileDataName } = this.state;
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <div>
          <div>附件参数名称：</div>
          <Input defaultValue={fileDataName} onChange={this.handleInputChange} />
        </div>
        <Upload
          wrappedComponentRef={this.uploadInsRef}
         
          onChange={this.onChange}
          uploadParams={{
            module: 'document'
          }}
          showBatchSign
          timeout={50000}
          onError={this.onError}
          fileDataName={fileDataName}
        // onUploading={this.onUploading}
        // uploadingData={uploadingdata}
        // uploadingOptions={ }
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 上传前进行文件重名校验

```jsx
import React, { Component } from 'react';
import { Button, Upload, UploadData, SelectOptionData, MListData, ListData, IFile, UploadOptionType } from '@weapp/ui';
import { data, appealData, uploadingdata, uploadingOptions, uploadingdata2 } from '../mock';
class UploadDemo extends Component<any> {
  state = { data: data, readOnly: true }
  uploadInsRef = React.createRef<any>()

  startUpload = () => {
    this.uploadInsRef?.current?.startUpload()
  }

  onUploading = (status: string, listT: UploadData[], listB: MListData[]) => {
    console.log(status, listT, listB)
  }

  render() {
    const { data } = this.state;
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <h3>自动上传</h3>
        <Upload
          uploadParams={{
            module: 'document'
          }}
          checkName={true}
          directoryId='200'
          onUploading={this.onUploading}
        />
        <h3>手动上传</h3>
        <Button onClick={this.startUpload}>上传到服务器</Button>
        <Upload
          wrappedComponentRef={this.uploadInsRef}
          uploadParams={{
            module: 'document'
          }}
          autoUpload={false}
          checkName={true}
          directoryId='200'
          onUploading={this.onUploading}
        />
      </div >
    );
  }
}

export default UploadDemo;
```

### 上传类型设置

```jsx
import React, { Component } from 'react';
import { Upload, Input, } from '@weapp/ui';
class UploadDemo extends Component<any> {
  state = { limitType: 'jpg, docx' }

  handleChange = (value: React.ReactText) => {
    this.setState({ limitType: value })
  }
  render() {
    const { limitType } = this.state;
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <h3>上传类型设置：</h3>
        <Input onChange={this.handleChange} value={limitType} />
        <Upload
          uploadParams={{
            module: 'document'
          }}
          limitType={limitType}
        />
      </div >
    );
  }
}

export default UploadDemo;
```

### 禁止上传类型限制

```jsx
import React, { Component } from 'react';
import { Upload, Input, } from '@weapp/ui';
class UploadDemo extends Component<any> {
  state = { prohibitType: 'jpg, docx' }

  handleChange = (value: React.ReactText) => {
    this.setState({ prohibitType: value })
  }
  render() {
    const { prohibitType } = this.state;
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <h3>禁止上传类型限制：</h3>
        <Input onChange={this.handleChange} value={prohibitType} />
        <Upload
          uploadParams={{
            module: 'document'
          }}
          prohibitType={prohibitType}
        />
      </div >
    );
  }
}

export default UploadDemo;
```

### 单文件上传功能

```jsx
import React, { Component } from 'react';
import { Upload, UploadData, } from '@weapp/ui';

const uploadParams = {
  module: 'document'
}
const data = [{
  fileid: '7834197454072120025',
  name: '首页.png',
  extName: 'png',
  size: 4582,
  signTip: '签署中',
  img: true,
  uploadUserName: '管理员',
  uploadTime: 1619678454971,
  options: [{ id: "preview", icon: "Icon-custom34-o", content: "预览", moreType: false },
  {
    id: 'delete',
    icon: 'Icon-cancel',
    content: '删除'
  },
  {
    id: 'download',
    icon: 'Icon-download02',
    content: '下载'
  }, {
    id: 'sign',
    icon: 'Icon-edit-o',
    content: '申请签署',
    moreType: true
  },
  ]
}]
class UploadDemo extends Component<any> {
  state = { prohibitType: 'jpg, docx', data: data }

  onChange = (data?: UploadData[]) => {
    this.setState({ data })
  }
  render() {
    const { data } = this.state;
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <h3>单图片上传功能 - 上传完成隐藏上传按钮</h3>
        <Upload
          uploadParams={uploadParams}
          singleUpload
          singleUploadButtnType={'hidden'}
          // data={data}
          listType='img'
          buttonType='image'
          limitType='jpg,jpeg,png'
          imgWidth={100}
          imgHeight={100}
          imgListType='horizontal'
          onChange={this.onChange}
        />
        <h3>单图片上传功能 - 上传完成显示上传按钮，再上传重上传</h3>
        <Upload
          uploadParams={uploadParams}
          singleUpload
          singleUploadButtnType={'reUpload'}
          // data={data}
          listType='img'
          buttonType='image'
          limitType='jpg,jpeg,png'
          imgWidth={100}
          imgHeight={100}
          imgListType="horizontal"
          onChange={this.onChange}
        />
      </div >
    );
  }
}

export default UploadDemo;
```

### 敏感词检测

```jsx
import React, { PureComponent } from 'react';
import { Upload } from '@weapp/ui';

let result: any = {
  code: 200,
  status: true,
  message: 'successful',
  data: {
    fileid: '733496511975596033',
    name: '00-钉钉模块_泛微e-colgy与阿里钉钉集成配置手册2015V4.0.docx',
    size: 1622313,
    extName: 'docx',
    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    img: false,
    uploadUser: '1554612592646902621',
    uploadUserName: '许平源',
    uploadTime: 1653980465964,
    doc: false,
    docId: '0',
    loadlink:
      '',
    options: [
      { id: 'preview', icon: 'Icon-custom34-o', content: '预览', moreType: false },
      { id: 'edit', icon: 'Icon-daily-o', content: '编辑', moreType: false },
      { id: 'download', icon: 'Icon-download02', content: '下载', moreType: false },
      { id: 'rename', icon: 'Icon-rename', content: '重命名', moreType: true },
      { id: 'version', icon: 'Icon-Unfinished-business-o', content: '历史版本', moreType: true },
      { id: 'reupload', icon: 'Icon-Left-refresh', content: '重新上传', moreType: true },
      { id: 'delete', icon: 'Icon-delete', content: '删除', moreType: false },
    ],
    uploadType: 'common',
    ban: false,
    mainAccess: false,
  },
};
result = {
  code: 300,
  status: false,
  message: 'error',
  data: {
    id: '733496511975596033', //文件id
    name: '+ +.docx', //文件名
    ban: true, //是否涉及敏感词，true ，涉及，false 不涉及
    sensitiveWords: '暴力，暴动', //具体的敏感词信息
  },
};
const datas = [
  {
    fileid: '733496511975596033',
    name: '00-钉钉模块_泛微e-colgy与阿里钉钉集成配置手册2015V4.0.docx',
    size: 1622313,
    extName: 'docx',
    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    img: false,
    uploadUser: '1554612592646902621',
    uploadUserName: '许平源',
    uploadTime: 1653980465964,
    doc: false,
    docId: '0',
    ban: true, //是否涉及敏感词，true ，涉及，false 不涉及
    sensitiveWords: '暴力，暴动', //具体的敏感词信息
    sensitiveStatus: 2, //检测状态，0未检测，1，检测中，2，检测完成
    options: [
      {
        id: 'preview',
        icon: 'Icon-custom34-o',
        content: '预览',
        moreType: false,
      },
      {
        id: 'edit',
        icon: 'Icon-daily-o',
        content: '编辑',
        moreType: false,
      },
      {
        id: 'download',
        icon: 'Icon-download02',
        content: '下载',
        moreType: false,
      },
      {
        id: 'rename',
        icon: 'Icon-rename',
        content: '重命名',
        moreType: true,
      },
      {
        id: 'version',
        icon: 'Icon-Unfinished-business-o',
        content: '历史版本',
        moreType: true,
      },
      {
        id: 'reupload',
        icon: 'Icon-Left-refresh',
        content: '重新上传',
        moreType: true,
      },
      {
        id: 'delete',
        icon: 'Icon-delete',
        content: '删除',
        moreType: false,
      },
    ],
    uploadType: 'common',
    mainAccess: false,
  },
  {
    fileid: '733496511975596033',
    name: '00-钉钉模块_泛微e-colgy与阿里钉钉集成配置手册2015V4.0.docx',
    size: 1622313,
    extName: 'docx',
    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    img: false,
    uploadUser: '1554612592646902621',
    uploadUserName: '许平源',
    uploadTime: 1653980465964,
    doc: false,
    docId: '0',
    ban: true, //是否涉及敏感词，true ，涉及，false 不涉及
    sensitiveWords: '暴力，暴动', //具体的敏感词信息
    sensitiveStatus: 2, //检测状态，0未检测，1，检测中，2，检测完成
    options: [
      {
        id: 'preview',
        icon: 'Icon-custom34-o',
        content: '预览',
        moreType: false,
      },
      {
        id: 'edit',
        icon: 'Icon-daily-o',
        content: '编辑',
        moreType: false,
      },
      {
        id: 'download',
        icon: 'Icon-download02',
        content: '下载',
        moreType: false,
      },
      {
        id: 'rename',
        icon: 'Icon-rename',
        content: '重命名',
        moreType: true,
      },
      {
        id: 'version',
        icon: 'Icon-Unfinished-business-o',
        content: '历史版本',
        moreType: true,
      },
      {
        id: 'reupload',
        icon: 'Icon-Left-refresh',
        content: '重新上传',
        moreType: true,
      },
      {
        id: 'delete',
        icon: 'Icon-delete',
        content: '删除',
        moreType: false,
      },
    ],
    uploadType: 'common',
    mainAccess: false,
  },
  {
    fileid: '733496511975596033',
    name: '00-钉钉模块_泛微e-colgy与阿里钉钉集成配置手册2015V4.0.docx',
    size: 1622313,
    extName: 'docx',
    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    img: false,
    uploadUser: '1554612592646902621',
    uploadUserName: '许平源',
    uploadTime: 1653980465964,
    doc: false,
    docId: '0',
    ban: true, //是否涉及敏感词，true ，涉及，false 不涉及
    sensitiveWords: '暴力，暴动', //具体的敏感词信息
    sensitiveStatus: 2, //检测状态，0未检测，1，检测中，2，检测完成
    options: [
      {
        id: 'preview',
        icon: 'Icon-custom34-o',
        content: '预览',
        moreType: false,
      },
      {
        id: 'edit',
        icon: 'Icon-daily-o',
        content: '编辑',
        moreType: false,
      },
      {
        id: 'download',
        icon: 'Icon-download02',
        content: '下载',
        moreType: false,
      },
      {
        id: 'rename',
        icon: 'Icon-rename',
        content: '重命名',
        moreType: true,
      },
      {
        id: 'version',
        icon: 'Icon-Unfinished-business-o',
        content: '历史版本',
        moreType: true,
      },
      {
        id: 'reupload',
        icon: 'Icon-Left-refresh',
        content: '重新上传',
        moreType: true,
      },
      {
        id: 'delete',
        icon: 'Icon-delete',
        content: '删除',
        moreType: false,
      },
    ],
    uploadType: 'common',
    mainAccess: false,
  },
];
class UploadDemo extends PureComponent {
  uploadParams = {
    module: 'document',
  };
  mockFetch = (options: any) => {
    return new Promise((res, rej) => {
      console.log(options);
      res(result);
    });
  };
  render() {
    return (
      <div>
        <h3>模拟上传接口</h3>
        <Upload
         
          // data={datas}
          uploadParams={this.uploadParams}
          checkSensitiveWords={true}
          fetch={this.mockFetch}
        />
        <h3>无模拟上传接口</h3>
        <Upload
         
          // data={datas}
          uploadParams={this.uploadParams}
          checkSensitiveWords={true}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 拖拽上传优化

```jsx
import { Component } from 'react';
import { observer } from 'mobx-react';
import { Upload, UploadData, Form, FormItemProps, Switch } from '@weapp/ui';
import FormDemoStore from './store';

const uploadParams = {
  module: 'document'
}

const switchStyle = {
  marginBottom: '10px',
  display: 'flex',
  alignItems: 'center'
}

const labelStyle = {
  marginLeft: '10px'
}

const formDemoStore = new FormDemoStore();
const items: FormItemProps = {
  'upload': {
    itemType: 'UPLOAD',
    otherParams: {
      uploadUrl: "/file/upload",
      uploadParams: {
        module: 'document'
      },
      sortable: true,
      dragHighlight: true
    }
  },
  'upload2': {
    itemType: 'UPLOAD',
    otherParams: {
      uploadUrl: "/api/file/module/upload",
      uploadParams: {
        module: 'document'
      },
      sortable: true,
      dragHighlight: true
    }
  },
  'upload3': {
    itemType: 'UPLOAD',
    otherParams: {
      uploadUrl: "/api/file/module/upload",
      uploadParams: {
        module: 'document'
      },
      sortable: true,
    }
  },
  'imageUpload': {
    itemType: 'UPLOAD',
    otherParams: {
      uploadUrl: "/api/file/module/upload",
      uploadParams: {
        module: 'document'
      },
      sortable: true,
      buttonType: 'image',
      dragHighlight: true
    }
  },
  'dragUpload': {
    itemType: 'UPLOAD',
    otherParams: {
      uploadUrl: "/api/file/module/upload",
      uploadParams: {
        module: 'document'
      },
      sortable: true,
      buttonType: 'drag',
      dragHighlight: true,
      uploadTitle: '点击或将文件拖拽到这里上传',
      dragInfo: "支持扩展名: Word，PDF，Jpeg，Png 等文件格式 （单个文件大小小于 50M）"
    }
  },
}
const initLayout = [
  [
    { id: '19', label: '上传', items: ['upload'], labelSpan: 0, hide: false },
  ],
  [
    { id: '19', label: '上传2', items: ['upload2'], labelSpan: 0, hide: false },
  ],
  [
    { id: '19', label: '上传3', items: ['upload3'], labelSpan: 0, hide: false },
  ],
  [
    { id: '19', label: '上传4', items: ['imageUpload'], labelSpan: 0, hide: false },
  ],
  [
    { id: '19', label: '上传5', items: ['dragUpload'], labelSpan: 0, hide: false },
  ],
]

@observer
class UploadDemo extends Component<any> {
  state = {
    dragGlobal: false
  }
  //  基本用法：初始化表单
  componentDidMount() {
    const apiTimeout = setTimeout(() => { // 延时模拟接口数据
      formDemoStore.formCustom.initForm({
        data: {}, items, layout: initLayout, groups: [], // groups为空，则不分组显示
      })
      if (apiTimeout) clearTimeout(apiTimeout);
    }, 50)
  }

  onChange = (data?: UploadData[]) => {
    console.error('data', data)
  }
  switchChange = (checked?: boolean) => {
    this.setState({ dragGlobal: checked })
  }
  render() {
    const { dragGlobal } = this.state;
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <h3>拖拽上传优化（显示拖拽弹框）</h3>
        <div style={switchStyle}>
          <Switch value={dragGlobal} onChange={this.switchChange} />
          <span style={labelStyle}>启用拖拽弹框</span>
        </div>
        <Upload
          uploadParams={uploadParams}
          routeId={'0'}
          dragGlobal={dragGlobal}
        />
        <h3>拖拽上传优化 - 图片上传（框选蓝色边框）</h3>
        <Upload
          uploadParams={uploadParams}
          routeId={'0'}
          buttonType={'image'}
          imgHeight={100}
          imgWidth={100}
          limitType={'jpeg,png,jpg'}
          dragHighlight
        />
        <h3>拖拽上传优化 - 拖拽模式（框选蓝色边框）</h3>
        <Upload
          uploadParams={uploadParams}
          routeId={'0'}
          buttonType={'drag'}
          dragHighlight
        />
        <h3>拖拽上传优化 - Form（框选蓝色边框）</h3>
        <Form
          store={formDemoStore.formCustom}
          isMobile={false}
          className="form-custom-style"  //通过className自定义form的样式  单个模块的样式在initLayout里面写入className
        />
      </div >
    );
  }
}

export default UploadDemo;
```

### 完整显示文件名称（hover 显示操作栏）

```jsx
import { Component } from 'react';
import { Upload, UploadData } from '@weapp/ui';
import { data } from '../mock';

const { FileList } = Upload;
const uploadParams = {
  module: 'document'
}
class UploadDemo extends Component<any> {
  state = { data: data }
  onChange = (data?: UploadData[]) => {
    this.setState({ data })
  }
  render() {
    return (
      <div style={{ overflow: 'hidden' }}>
        <h2>listOptionType为"optionHover"</h2>
        <Upload
          data={this.state.data}
          batchDelete
          onChange={this.onChange}
          uploadParams={uploadParams}
          listOptionType={"optionHover"}
        />
        <br />
        <h2>listOptionType为"optionPopover"</h2>
        <Upload
          data={this.state.data}
          batchDelete
          onChange={this.onChange}
          uploadParams={uploadParams}
          listOptionType={"optionPopover"}
        />
        <br />
        <h2>listOptionType为"optionCover"</h2>
        <Upload
          data={this.state.data}
          batchDownload
          onChange={this.onChange}
          uploadParams={uploadParams}
          listOptionType={'optionCover'}
        />
        <br />
        <h2>listOptionType为"normal"</h2>
        <Upload
          data={this.state.data}
          onChange={this.onChange}
          sortable
          uploadParams={uploadParams}
          listOptionType={"normal"}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 批量操作

```jsx
import { Component } from 'react';
import { Upload, UploadData } from '@weapp/ui';

const uploadParams = {
  module: 'document',
};

let item = {
  // "fileid": "757364886591094784",
  fileid: '757567772154863612226',
  name: 'Lemon(米津玄师).jpeg',
  size: 73576,
  extName: 'jpeg',
  type: 'image/jpeg',
  img: true,
  uploadUser: '7343056717276076274',
  uploadUserName: '许平源',
  uploadTime: 1659537754957,
  doc: false,
  docId: '0',
  loadlink:
    '',
  options: [
    {
      id: 'preview',
      icon: 'Icon-custom34-o',
      content: '预览',
      moreType: false,
    },
    {
      id: 'download',
      icon: 'Icon-download02',
      content: '下载',
      moreType: false,
    },
    {
      id: 'rename',
      icon: 'Icon-rename',
      content: '重命名',
      moreType: true,
    },
    {
      id: 'version',
      icon: 'Icon-Unfinished-business-o',
      content: '历史版本',
      moreType: true,
    },
    {
      id: 'reupload',
      icon: 'Icon-Left-refresh',
      content: '重新上传',
      moreType: true,
    },
    {
      id: 'delete',
      icon: 'Icon-delete',
      content: '删除',
      moreType: false,
    },
    {
      id: 'apply',
      icon: 'Icon-apply-o',
      content: '申请签署',
      moreType: true,
      url: '',
    },
  ],
  signTip: '',
  otherParams: {
    isComment: false,
    signStatus: '',
    hasComplete: '',
  },
  uploadType: 'common',
  ban: false,
  mainAccess: false,
};
class UploadDemo extends Component<any> {
  state = { data: [], uploadingData: [] };
  onChange = (data?: UploadData[], uploadingData?: any) => {
    console.log(data, uploadingData);
    this.setState({ data, uploadingData });
  };
  render() {
    return (
      <div>
        <h2>批量签署</h2>
        <Upload
         
          data={this.state.data}
          uploadingData={this.state.uploadingData}
          onChange={this.onChange}
          uploadParams={uploadParams}
          showBatchSign
          autoUpload={true}
        />
        <h2>批量下载</h2>
        <Upload
         
          data={this.state.data}
          uploadingData={this.state.uploadingData}
          onChange={this.onChange}
          uploadParams={uploadParams}
          batchDownload
          autoUpload={true}
        />
        <h2>批量删除 - 不走接口</h2>
        <Upload
         
          data={this.state.data}
          uploadingData={this.state.uploadingData}
          onChange={this.onChange}
          uploadParams={uploadParams}
          batchDelete
          isDeleteConfirm
          autoUpload={true}
        />
        <h2>批量删除 - 走接口</h2>
        <Upload
         
          data={this.state.data}
          uploadingData={this.state.uploadingData}
          onChange={this.onChange}
          uploadParams={uploadParams}
          batchDelete
          isDeleteConfirm
          isDeleteInterface
          autoUpload={true}
          // 目前组件内置业务的批量删除 url，文档模块需要自行设置文档模块自己的批量删除 url
          // batchDeleteURL={'/{api}/file/dl'}
        />
        <h2>多个批量操作</h2>
        <Upload
         
          data={this.state.data}
          uploadingData={this.state.uploadingData}
          onChange={this.onChange}
          uploadParams={uploadParams}
          batchDownload
          batchDelete
          showBatchSign
          autoUpload={true}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 上传限制

附件上传限制设置：maxConut、maxSize、totalMaxSize 等

```jsx
import { Component, CSSProperties, ReactText } from 'react';
import { Upload, Input } from '@weapp/ui';

const divStyle: CSSProperties = {
  display: 'flex',
  alignItems: 'center'
}

const bodyStyle: CSSProperties = {
  marginRight: '10px'
}
const uploadParams = {
  module: 'document'
}
class UploadDemo extends Component<any> {
  state = {
    maxCount: 9,
    maxSize: 25,
    totalMaxSize: 200
  }
  maxCountChange = (value: ReactText) => {
    this.setState({ maxCount: value })
  }

  maxSizeChange = (value: ReactText) => {
    this.setState({ maxSize: value })
  }

  totalMaxSizeChange = (value: ReactText) => {
    this.setState({ totalMaxSize: value })
  }
  render() {
    const { maxCount, maxSize, totalMaxSize } = this.state;
    return (
      <div>
        <div style={divStyle}>
          <span style={bodyStyle}>maxCount:</span>
          <Input value={maxCount} onChange={this.maxCountChange} />
        </div>
        <div style={divStyle}>
          <span style={bodyStyle}>maxSize:</span>
          <Input value={maxSize} onChange={this.maxSizeChange} />
        </div>
        <div style={divStyle}>
          <span style={bodyStyle}>totalMaxSize:</span>
          <Input value={totalMaxSize} onChange={this.totalMaxSizeChange} />
        </div>
        <Upload
          maxCount={maxCount}
          maxSize={maxSize}
          totalMaxSize={totalMaxSize}
          uploadParams={uploadParams}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 单独使用敏感词提示面板

抛出敏感词面板，模块可以直接使用敏感词提示面板的展示功能

```jsx
import { Component } from 'react';
import { Button, Upload } from '@weapp/ui';

const { SensitiveWordsDialog } = Upload;
const uploadParams = {
  module: 'document',
}
class UploadDemo extends Component<any> {

  state = {
    data: [{
      name: '有问题附件',
      sensitiveWords: '测试,111'
    }, {
      name: '有问题的列表',
      sensitiveWords: '法轮'
    }],
    visible: false
  }
  changeVisible = () => {
    this.setState({ visible: !this.state.visible })
  }
  onClose = (files: any) => {
    console.log('files', files)
    this.setState({ visible: false })
  }
  render() {
    const { data, visible } = this.state;
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <Button onClick={this.changeVisible}>点击弹出敏感词提示</Button>
        <SensitiveWordsDialog
          data={data}
          visible={visible}
          onClose={this.onClose}
          onSure={this.onClose}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 各空内容展示效果

各空内容展示效果

```jsx
import { Component } from 'react';
import { Button, Upload } from '@weapp/ui';

const { SensitiveWordsDialog } = Upload;
const uploadParams = {
  module: 'document',
}
class UploadDemo extends Component<any> {

  state = {
    data: [{
      name: '有问题附件',
      sensitiveWords: '测试,111'
    }, {
      name: '有问题的列表',
      sensitiveWords: '法轮'
    }],
    visible: false
  }
  changeVisible = () => {
    this.setState({ visible: !this.state.visible })
  }
  onClose = (files: any) => {
    console.log('files', files)
    this.setState({ visible: false })
  }
  render() {
    const { data, visible } = this.state;
    return (
      <div>
        <h2>buttonType: default, disabledType: hidden</h2>
        <h3>readOnly/disabled - 无数据</h3>
        <Upload
          readOnly
          buttonType='default'
        />
        <h3>readOnly/disabled - 有数据</h3>
        <Upload
          readOnly
          buttonType='default'
          data={data}
        />
        <h2>buttonType: image, disabledType: hidden</h2>
        <h3>readOnly/disabled - 无数据</h3>
        <Upload
          readOnly
          buttonType='image'
        />
        <h3>readOnly/disabled - 有数据</h3>
        <Upload
          readOnly
          buttonType='image'
          data={data}
        />

        <h2>buttonType: default, disabledType: disabled</h2>
        <h3>readOnly/disabled - 无数据</h3>
        <Upload
          readOnly
          buttonType='default'
          disabledType='disabled'
        />
        <h3>readOnly/disabled - 有数据</h3>
        <Upload
          readOnly
          buttonType='default'
          disabledType='disabled'
          data={data}
        />
        <h2>buttonType: image, disabledType: disabled</h2>
        <h3>readOnly/disabled - 无数据</h3>
        <Upload
          readOnly
          buttonType='image'
          disabledType='disabled'
        />
        <h3>readOnly/disabled - 有数据</h3>
        <Upload
          readOnly
          buttonType='image'
          disabledType='disabled'
          data={data}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 单附件上传

```jsx
import { Component, ReactNode } from 'react';
import { Upload, IFile, Input } from '@weapp/ui';

const uploadParams = {
  module: 'document',
};
class UploadDemo extends Component<any> {
  beforeAddFile = (files: IFile[]) => {
    console.log('files', files);
    return files.map((file) => {
      file.secretLevelValidity = '复写 10 个月';
      return file;
    });
    // return false;
  };

  onPaste = (e: any) => {
    console.log(e.clipboardData.items.length);
  };
  onUploading = (status: string) => {
    console.log(status);
  };
  renderUploadButton = (eventProps: any, inputDom: ReactNode) => {
    const { onPaste, onClick, ...restProps } = eventProps;
    return (
      <div {...restProps} style={{ display: 'flex' }}>
        {inputDom}
        <Input placeholder='粘贴上传' onPaste={onPaste} />
      </div>
    );
  };
  render() {
    return (
      <div style={{ overflow: 'hidden' }}>
        {/* 上传单个，后续上传提示只能上传一个附件, 且上传按钮拖拽上传功能失效, 当前个删除移除 */}
        <h4>附件单文件,默认上传</h4>
        <Upload
         
          singleUpload
          uploadParams={uploadParams}
          listType='list'
          buttonType='default'
        />
        {/* 上传单个，后续拖拽或者点击上传附件无效果 */}
        <h4>附件单文件,拖拽上传</h4>
        <Upload
         
          singleUpload
          uploadParams={uploadParams}
          listType='list'
          buttonType='drag'
        />
        {/* 上传单个 后续提示不影响 提示替换内容 */}
        <h4>单图片, 默认上传</h4>
        <Upload
          directory
         
          uploadParams={uploadParams}
          singleUpload
          singleUploadButtnType={'reUpload'}
          listType='img'
          buttonType='default'
          limitType='jpg,jpeg,png'
          imgWidth={100}
          imgHeight={100}
          imgListType='horizontal'
        />

        <h4>单图片,拖拽上传</h4>
        <Upload
          directory
         
          uploadParams={uploadParams}
          singleUpload
          singleUploadButtnType={'reUpload'}
          listType='img'
          buttonType='drag'
          limitType='jpg,jpeg,png'
          maxSize={200}
          imgWidth={100}
          imgHeight={100}
          imgListType='horizontal'
        />

        {/* 上传单个，后续上传提示只能上传一个附件, 且上传按钮拖拽上传功能失效, 当前个删除移除 */}
        <h4>图片粘贴上传,默认上传</h4>
        <Upload
         
          singleUpload
          singleUploadButtnType='reUpload'
          uploadParams={uploadParams}
          listType='img'
          buttonType='drag'
          limitType='jpg,jpeg,png'
          renderUploadButton={this.renderUploadButton}
        />
        <h4>附件粘贴上传,默认上传</h4>
        <Upload
         
          singleUpload
          uploadParams={uploadParams}
          listType='list'
          buttonType='drag'
          limitType='jpg,jpeg,png'
          renderUploadButton={this.renderUploadButton}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 提示语

大小、格式、数量提示语

```jsx
import { Component } from 'react';
import { Upload, IFile } from '@weapp/ui';
import React from 'react';

const uploadParams = {
  module: 'document',
};
class UploadDemo extends Component<any> {
  beforeAddFile = (files: IFile[]) => {
    console.log('files', files);
    return files.map((file) => {
      file.secretLevelValidity = '复写 10 个月';
      return file;
    });
    // return false;
  };

  renderUploadTips = (limitType?: string, maxSize?: number, maxCount?: number) => {
    return `自定义渲染提示语：格式${limitType},限制最大大小${maxSize}, 最大上传数${maxCount}`;
  };
  render() {
    return (
      <div>
        {/* 上传单个，后续上传提示只能上传一个附件, 且上传按钮拖拽上传功能失效, 当前个删除移除 */}
        <h4>附件上传,限制格式</h4>
        <Upload
         
          uploadParams={uploadParams}
          limitType='jpg,jpeg,png'
          // maxSize={200}
          // maxCount={10}
          listType='list'
          buttonType='default'
          displayTip={true}
        />

        <h4>附件上传,限制大小</h4>
        <Upload
         
          uploadParams={uploadParams}
          maxSize={200}
          // maxCount={10}
          listType='list'
          buttonType='default'
          displayTip={true}
        />

        <h4>附件上传,限制数量</h4>
        <Upload
         
          uploadParams={uploadParams}
          maxCount={2}
          listType='list'
          buttonType='default'
          displayTip={true}
        />

        <h4>附件上传,限制格式大小</h4>
        <Upload
         
          uploadParams={uploadParams}
          limitType='jpg,jpeg,png'
          maxSize={200}
          listType='list'
          buttonType='default'
          displayTip={true}
        />

        <h4>附件上传,限制格式数量</h4>
        <Upload
         
          uploadParams={uploadParams}
          limitType='jpg,jpeg,png'
          maxCount={10}
          listType='list'
          buttonType='default'
          displayTip={true}
        />

        <h4>附件上传,限制大小数量</h4>
        <Upload
         
          uploadParams={uploadParams}
          // limitType='jpg,jpeg,png'

          maxSize={200}
          maxCount={10}
          listType='list'
          buttonType='default'
          displayTip={true}
        />
        <h4>附件上传,限制格式大小数量</h4>
        <Upload
         
          uploadParams={uploadParams}
          limitType='jpg,jpeg,png'
          maxSize={200}
          maxCount={10}
          listType='list'
          buttonType='default'
          displayTip={true}
        />

        <h4>附件拖拽模式,限制格式大小数量(超长情况)</h4>
        <Upload
         
          uploadParams={uploadParams}
          limitType='jpg,jpeg,png,mkv,mp4,avi,swf,wmv,rmvb,mpg,jpg,jpeg,pen,png,gif,bmp,psd,tif,txt,pdf,doc,docs,xls,xlsx,ppt,pptx,wps,rar,zip,7z,gz,mp3,mp4,mp5,wma,wav,aac,m4a,au,au,ram'
          maxSize={200}
          maxCount={10}
          listType='list'
          buttonType='drag'
          displayTip={true}
        />

        <h4>附件上传,限制格式大小数量(超长情况)</h4>
        <Upload
         
          uploadParams={uploadParams}
          limitType='jpg,jpeg,png,mkv,mp4,avi,swf,wmv,rmvb,mpg,jpg,jpeg,pen,png,gif,bmp,psd,tif,txt,pdf,doc,docs,xls,xlsx,ppt,pptx,wps,rar,zip,7z,gz,mp3,mp4,mp5,wma,wav,aac,m4a,au,au,ram'
          maxSize={200}
          maxCount={10}
          listType='list'
          buttonType='image'
          displayTip={true}
        />

        <h4>简易模式,限制格式大小数量</h4>
        <Upload
         
          type={'simple'}
          uploadParams={uploadParams}
          limitType='jpg,jpeg,png'
          maxSize={200}
          maxCount={10}
          displayTip={true}
        />

        <h4>图片默认上传, 限制格式大小数量</h4>
        <Upload
         
          uploadParams={uploadParams}
          listType='img'
          buttonType='default'
          limitType='jpg,jpeg,png'
          maxSize={200}
          maxCount={10}
          displayTip={true}
        />

        <h4>图片拖拽上传, 限制格式大小数量</h4>
        <Upload
         
          uploadParams={uploadParams}
          listType='img'
          buttonType='drag'
          limitType='jpg,jpeg,png'
          maxSize={200}
          maxCount={10}
          displayTip={true}
        />

        <h4>多图片上传, 限制格式大小数量</h4>
        <Upload
         
          uploadParams={uploadParams}
          listType='img'
          buttonType='image'
          limitType='jpg,jpeg,png'
          maxSize={200}
          maxCount={10}
          displayTip={true}
        />

        <h4>图片上传 上传按钮与图片一行显示, 限制格式大小数量</h4>
        <Upload
         
          uploadParams={uploadParams}
          isUpdaterLineOfRow
          listType='img'
          buttonType='image'
          limitType='jpg,jpeg,png'
          maxSize={200}
          maxCount={10}
          displayTip={true}
        />

        <h4>图片上传,显示内容修改,限制格式大小数量</h4>
        <Upload
         
          uploadParams={uploadParams}
          listType='img'
          buttonType='image'
          limitType='jpg,jpeg,png'
          maxSize={200}
          maxCount={10}
          imgWidth={200}
          imgHeight={200}
          imgListType='horizontal'
          displayTip={true}
        />

        <h4>限制格式大小数量, 自定义渲染提示语</h4>
        <Upload
         
          uploadParams={uploadParams}
          limitType='jpg,jpeg,png'
          maxSize={200}
          maxCount={10}
          imgWidth={200}
          imgHeight={200}
          renderUploadTips={this.renderUploadTips}
          displayTip={true}
        />

        <h4>双重提示语优化处理</h4>
        <Upload
         
          uploadParams={uploadParams}
          routeId={'0'}
          dragGlobal={false}
          dragInfo='支持扩展名: Word，PDF，Jpeg，Png 等文件格式 （单个文件大小小于 50M）'
          maxSize={200}
          maxCount={10}
          displayTip={true}
        />

        <h4>关闭提示语(设置 displayTip 为false)</h4>
        <Upload
         
          uploadParams={uploadParams}
          limitType='jpg,jpeg,png'
          maxSize={200}
          maxCount={10}
          imgWidth={200}
          imgHeight={200}
          displayTip={false}
          renderUploadTips={this.renderUploadTips}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 多种按钮操作展示效果

```jsx
import { Component } from 'react';
import { Button, Upload, UploadData } from '@weapp/ui';
import { uploadData } from '../mock';

const uploadParams = {
  module: 'document',
};
const { FileList } = Upload;
const operateButtonStyle = {
  marginLeft: 4,
};
class UploadDemo extends Component<any> {
  state = { data: uploadData };

  onChange = (data?: UploadData[]) => {
    this.setState({ data });
  };
  render() {
    const uploadData = this.state.data;
    return (
      <>
        <h4>基本用法</h4>
        <div>
          <Upload
           
            uploadParams={uploadParams}
            data={uploadData}
            onChange={this.onChange}
          />
        </div>

        <h4>列表拖拽</h4>
        <div>
          <Upload
           
            sortable
            uploadParams={uploadParams}
            data={uploadData}
            onChange={this.onChange}
          />
        </div>

        <h4>简易模式</h4>
        <div>
          <Upload
           
            uploadParams={uploadParams}
            data={uploadData}
            type='simple'
            onChange={this.onChange}
          />
        </div>

        <h4>正常模式下,无拖拽区域</h4>
        <div>
          <Upload
           
            uploadParams={uploadParams}
            data={uploadData}
            dragUpload={false}
            onChange={this.onChange}
          />
        </div>

        <h4>只读模式(只读模式不显示上传按钮)</h4>
        <div>
          <Upload
           
            sortable
            uploadParams={uploadParams}
            data={uploadData}
            readOnly
            onChange={this.onChange}
          />
        </div>

        <h4>单独附件列表</h4>
        <FileList
         
          data={uploadData}
          sortable
          uploadParams={uploadParams}
          onChange={this.onChange}
        />

        <h4>自定义上传区域(使用operateButtonStyle复写操作栏位置)</h4>
        <Upload
         
          sortable
          uploadParams={uploadParams}
          data={uploadData}
          operateButtonStyle={operateButtonStyle}
          onChange={this.onChange}
        >
          <Button>自定义按钮</Button>
        </Upload>
        <h4>拖拽上传-图片模式</h4>
        <Upload
         
          uploadParams={uploadParams}
          routeId={'0'}
          buttonType={'image'}
          imgHeight={100}
          imgWidth={100}
        />
        <h4>拖拽上传-拖拽模式</h4>
        <Upload
         
          uploadParams={uploadParams}
          routeId={'0'}
          buttonType={'drag'}
          imgHeight={100}
          imgWidth={100}
        />
      </>
    );
  }
}

export default UploadDemo;
```

### 模拟上传失败提示效果

上传失败效果模拟

```jsx
import { Component } from 'react';
import { Upload } from '@weapp/ui';

const uploadParams = {
  module: 'document',
};

const customErrorInfo = () => '对不起,附件空间不足，请联系管理员,对不起,附件空间不足，请联系管理员。文本内容超长情况';
class UploadDemo extends Component<any> {
  render() {
    return (
      <>
        <h4>基本用法</h4>
        <div>
          <Upload uploadUrl='/file/upload/error' uploadParams={uploadParams} />
        </div>
      </>
    );
  }
}

export default UploadDemo;
```

### 禁止下载功能

```jsx
import { Component } from 'react';
import { Upload } from '@weapp/ui';
import { UploadData } from '@weapp/ui';

const uploadParams = {
  module: 'document',
};

class UploadDemo extends Component<any> {
  state = {
    datas: []
  }
  onChange = (datas?: UploadData[]) => {
    this.setState({
      datas: datas?.map(item => {
        const newOptions = item.options?.filter(o => o.id !== 'download')
        return { ...item, options: newOptions };
      })
    })
  }
  render() {
    const { datas } = this.state;
    return (
      <div>
        <h4>1. 使用 showDownload: false 禁止下载功能</h4>
        <div>
          <Upload
            showDownload={false}
            uploadParams={uploadParams} />
        </div>
        <h4>2. options 不返回 download 配置</h4>
        <div>
          <Upload
            showDownload={false}
            uploadParams={uploadParams}
            onChange={this.onChange}
            data={datas}
          />
        </div>
      </div>
    );
  }
}

export default UploadDemo;
```

### 附件密级校验

```jsx
import React, { Component } from 'react';
import {Upload, UploadData, Button, SecretSelect, SecretSelectValueType, Dialog} from '@weapp/ui';

const { getSecretLevelInfo } = SecretSelect;
const { getAttachmentLocalSecurityInfo } = Upload;

class UploadDemo extends Component<any, any> {
  state = {
    listT: [],
    listB: [],
    isAllow: false,
    verifyFormat: '',
    isOpenClassification: false,
    secretLevel: '',
    secretLevelValidity: '',
  }
  uploadInsRef = React.createRef<any>()

  getUploadInsRed = (el: any) => {
    this.uploadInsRef = el
  }

  componentDidMount() {
    getSecretLevelInfo()
      .then(res => {
        this.setState({ isOpenClassification: res.isOpenClassification })
      })

    getAttachmentLocalSecurityInfo()
      .then(res => {
        this.setState({ isAllow: res.isAllow, verifyFormat: res.verifyFormat })
      })
  }

  startUpload = () => {
    this.uploadInsRef?.current?.startUpload()
  }

  onChange = (listT?: UploadData[], listB?: UploadData[]) => {
    this.setState({ listT, listB })
  }

  secretChange = (value: SecretSelectValueType) => {
    this.setState({ secretLevel: value.secretLevel, secretLevelValidity: value.secretLevelValidity })
  }

  render() {
    const { isOpenClassification, isAllow, verifyFormat, secretLevel, secretLevelValidity, listB } = this.state;
    return (
        <div
            style={{overflow: 'hidden'}}
        >
          <h4>{isAllow ? `已开启本地标密上传，格式：${verifyFormat}` : '未开启本地标密上传'}</h4>
          {
            isOpenClassification ?
                <SecretSelect
                              onChange={this.secretChange}
                />
                : <div>未开启密级，请先开启密级后再使用该 demo</div>
          }
          <h3>自动上传</h3>
          <Upload
             
              onChange={this.onChange}
              uploadParams={{
                module: 'document'
              }}
              // 附件密级接口
              secretProtect  // 开启附件密级保护
              secretLevel={secretLevel}  // 设置附件密级信息
              secretLevelValidity={secretLevelValidity}
          />
          <h3>主动上传</h3>
          <Upload
              wrappedComponentRef={this.uploadInsRef}
             
              onChange={this.onChange}
              uploadingData={listB}
              uploadParams={{
                module: 'document'
              }}
              autoUpload={false}
              // 附件密级接口
              secretProtect  // 开启附件密级保护
              secretLevel={secretLevel}  // 设置附件密级信息
              secretLevelValidity={secretLevelValidity}
          />
          <h3>所选文件密级都不通过是否弹框</h3>
          <Upload
              wrappedComponentRef={this.uploadInsRef}
              onChange={this.onChange}
              uploadingData={listB}
              uploadParams={{
                module: 'document'
              }}
              autoUpload={false}
              // 附件密级接口
              secretProtect  // 开启附件密级保护
              secretLevel={secretLevel}  // 设置附件密级信息
              secretLevelValidity={secretLevelValidity}
              localSecurityAllNonCompliantConfirm={false}
          />
          <Button onClick={this.startUpload}>上传到服务器</Button>
        </div>
    );
  }
}

export default UploadDemo;
```

### 密级自动调整

```jsx
import React, { Component } from 'react';
import { Upload, UploadData, Button, SecretSelect, SecretSelectValueType } from '@weapp/ui';

const { getSecretLevelInfo } = SecretSelect;
const { getAttachmentLocalSecurityInfo } = Upload;

class UploadDemo extends Component<any> {

  state = {
    listT: [],
    listB: [],
    isAllow: false,
    verifyFormat: '',
    isOpenClassification: false,
    secretLevel: '',
    secretLevelValidity: '',
  }

  uploadInsRef = React.createRef<any>()

  getUploadInsRed = (el: any) => {
    this.uploadInsRef = el
  }

  componentDidMount() {
    getSecretLevelInfo()
      .then(res => {
        this.setState({ isOpenClassification: res.isOpenClassification })
      })

    getAttachmentLocalSecurityInfo()
      .then(res => {
        this.setState({ isAllow: res.isAllow, verifyFormat: res.verifyFormat })
      })
  }

  onChange = (listT?: UploadData[], listB?: UploadData[]) => {
    this.setState({ listT, listB })
  }
  secretChange = (value: SecretSelectValueType) => {
    this.setState({ secretLevel: value.secretLevel, secretLevelValidity: value.secretLevelValidity })
  }
  startUpload = () => {
    this.uploadInsRef?.current?.startUpload()
  }
  render() {
    const { isOpenClassification, isAllow, verifyFormat, secretLevel, secretLevelValidity, listT } = this.state;

    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <h4>{isAllow ? `已开启本地标密上传，格式：${verifyFormat}` : '未开启本地标密上传'}</h4>
        {isOpenClassification ?
          <SecretSelect
            onChange={this.secretChange}
          /> : <div>未开启密级，请先开启密级后再使用该 demo</div>}

        <Upload
          wrappedComponentRef={this.uploadInsRef}
          uploadParams={{
            module: 'document'
          }}
          data={listT}
          onChange={this.onChange}
          autoUpload={false}
          // 附件密级
          secretProtect
          secretLevel={secretLevel}  // 设置附件密级信息
          secretLevelValidity={secretLevelValidity}
          secretLevelAutoAdjust
        />
        <Button onClick={this.startUpload}>上传到服务器</Button>
        <h4>自动上传，且不需密级确认</h4>
        <Upload
                uploadParams={{
                  module: 'document'
                }}
                data={listT}
                onChange={this.onChange}
                autoUpload
            // 附件密级
                secretProtect
                secretLevel={secretLevel}  // 设置附件密级信息
                secretLevelValidity={secretLevelValidity}
                secretLevelAutoAdjust
                secretConfim={false}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 调用附件标密校验方法

```jsx
import { Component } from 'react';
import { Upload, UploadData, IFile, SecretSelect, SecretSelectValueType, Button } from '@weapp/ui';

const { getAttachmentLocalSecurityInfo, doLocalSecurityValidate } = Upload;
const { getSecretLevelInfo } = SecretSelect;

const uploadParams = {
  module: 'document',
}

class UploadDemo extends Component<any> {

  state: any = {
    secretLevel: '',
    secretLevelValidity: '',
    uploadingData: []

  }
  beforeAddFile = (files: IFile[]) => {
    console.log('files', files)
    return files.map(file => {
      file.secretLevelValidity = '复写 10 个月'
      return file;
    })
    // return false;
  }
  onChange = (listT?: UploadData[] | undefined, listB?: UploadData[] | undefined, reUpload?: boolean | undefined) => {
    console.error('onChange', listT, listB, reUpload)
    this.setState({ uploadingData: listB })
  }

  onUploadFinally = () => {
    console.log('上传结束！')
  }
  requestHeaderParams = {
    testHeaderId: '1',
  }

  onUploadCancle = (item: UploadData, listT: UploadData[], listB: UploadData[]) => {
    console.log('上传取消事件')
    console.log(item, listT, listB)
  }

  changeSecretSelect = (value: any) => {
    this.setState({ ...value });
  }
  getSecretLevelInfo = () => {
    getSecretLevelInfo()
      .then(data => {
        console.error(data);
      })
  }

  getLocalSecurityInfo = () => {
    getAttachmentLocalSecurityInfo()
      .then(data => {
        console.error(data);
      })
  }

  onClick = () => {
    const { uploadingData, secretLevel } = this.state;
    doLocalSecurityValidate(uploadingData as any[], secretLevel)
      .then(res => {
        // 校验完成，返回结果
        console.error('校验完成：', res)
      })
      .catch(res => {
        // 校验有报错情况
        console.log('校验异常：', res)
      })
  }
  render() {
    const { secretLevel, secretLevelValidity } = this.state;
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <h3>该 demo 需要在后台设置中开启允许附件本地标密上传才可使用</h3>
        <h4>选择密级</h4>
        <SecretSelect
          onChange={this.changeSecretSelect}
        />
        <h4>选择文件</h4>
        <Upload
         
          uploadParams={uploadParams}
          autoUpload={false}
          onChange={this.onChange}
        />
        <br />
        <Button onClick={this.onClick} > 触发校验</Button>
      </div>
    );
  }
}

export default UploadDemo;
```

### 调用图片上传方法

```jsx
import { Component, ReactNode } from 'react';
import { Upload, UploadData, IFile, SecretSelect, SecretSelectValueType, Button, Dialog, Spin, Icon, Input } from '@weapp/ui';

// const { getAttachmentLocalSecurityInfo } = Upload;
const { getSecretLevelInfo } = SecretSelect;

const uploadParams = {
  module: 'document',
}

const styleOut = { outline: '#E5E5E5 dashed 2px', position: 'relative', cursor: 'pointer' }
const styleBtn: any = { position: 'relative' }
const style1 = { width: '200px' }

class UploadDemo extends Component<any> {

  state = {
    secretLevel: '',
    secretLevelValidity: '',
    file: null,
    imgUrl: '',
    loading: false
  }
  beforeAddFile = (files: IFile[]) => {
    console.log('files', files)
    return files.map(file => {
      file.secretLevelValidity = '复写 10 个月'
      return file;
    })
    // return false;
  }
  onChange = (listT?: UploadData[] | undefined, listB?: UploadData[] | undefined, reUpload?: boolean | undefined) => {
    console.error('onChange', listT, listB, reUpload)
  }

  onUploadFinally = () => {
    console.log('上传结束！')
  }
  requestHeaderParams = {
    testHeaderId: '1',
  }

  onUploadCancle = (item: UploadData, listT: UploadData[], listB: UploadData[]) => {
    console.log('上传取消事件')
    console.log(item, listT, listB)
  }

  changeSecretSelect = (value: any) => {
    this.setState({ ...value });
  }
  getSecretLevelInfo = () => {
    getSecretLevelInfo()
      .then(data => {
        console.error(data);
      })
  }

  // getLocalSecurityInfo = () => {
  //   getAttachmentLocalSecurityInfo()
  //   .then(data => {
  //     console.error(data);
  //   })
  // }
  onAdd = (files: IFile[]) => {
    this.setState({ file: files[0] })
  }
  onClick = () => {
    const { file } = this.state;
    this.setState({ loading: true })
    Upload.uploadImage({
      file: file as any,
      uploadParams: {
        module: 'document'
      }
    }).then(res => {
      console.log(res)
      this.setState({ imgUrl: res.imgUrl, loading: false })
    }).catch(error => {
      console.error(error);
      Dialog.message({
        type: 'error',
        content: error
      });
      this.setState({ loading: false })
    })
  }

  renderUploadButton = (eventProps: any, inputDom: ReactNode) => {
    const { onPaste, onClick, ...restProps } = eventProps
    return <div {...restProps} style={styleOut}>
      <Button type="primary"
        onClick={onClick}
        style={styleBtn}
      >
        <Icon name="Icon-upload02" />
        {'自定义上传按钮'}
        {inputDom}
      </Button>
      <Input
        placeholder="粘贴上传"
        style={style1}
        onPaste={onPaste}
      />
      <span style={{ marginLeft: '20px', color: '#ccc', fontSize: '12px' }} onClick={onClick}>(点击或拖拽上传)</span></div>
  }

  render() {
    const { imgUrl, file, loading } = this.state;
    const uploadingData: any = file ? [file] : [];
    return (
      <div
        style={{ overflow: 'hidden' }}
      >
        <Spin spinning={loading}>
          <Upload
           
            uploadParams={uploadParams}
            autoUpload={false}
            uploadingData={uploadingData}
            multiple={false}
            onAdd={this.onAdd}
            renderUploadButton={this.renderUploadButton}
            uploadTitle='选择文件'
          />
          {imgUrl && <img src={imgUrl} />}
          <Button onClick={this.onClick}>上传图片</Button>
        </Spin>
      </div>
    );
  }
}

export default UploadDemo;
```

### 左侧附件列表

```jsx
import React, { PureComponent } from 'react';
import { ListData, Upload, UploadData } from "@weapp/ui";
import { data, uploadingdata } from "../mock";

class Demo extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      sortable: false,
      data: [...data],
      uploadingdata: uploadingdata,
    }
  }

  handleBadgeClick = (data?: UploadData) => {
    console.error(data);
  }

  handleChange = (listT?: UploadData[], listB?: UploadData[]) => {
    this.setState({
      data: listT,
      uploadingdata: listB
    })
  }

  render() {
    const { data, uploadingdata } = this.state;
    return (
      <div>
        <h3>附件列表 - 表格模式</h3>
        <Upload
         
          data={data}
          // uploadingData={uploadingdata}
          sortable={false}
          uploadParams={{
            module: 'document',
          }}
          type={'table'}
          batchDelete={true}
          batchDownload={true}
          showBatchSign={true}
          onBadgeClick={this.handleBadgeClick}
          onChange={this.handleChange}
          secretProtect
          secretLevel='4'
          tableTitle='测试上传'
        />
        <h3>附件列表 - 表格模式，支持拖拽排序</h3>
        <Upload
         
          data={data}
          // uploadingData={uploadingdata}
          sortable={true}
          uploadParams={{
            module: 'document',
          }}
          type={'table'}
          batchDelete={true}
          batchDownload={true}
          showBatchSign={true}
          onBadgeClick={this.handleBadgeClick}
          onChange={this.handleChange}
        />
        <h3>附件列表 - 左侧列表模式</h3>
        <Upload
         
          data={data}
          sortable={false}
          uploadParams={{
            module: 'document',
          }}
          type={'inside'}
          batchDelete={true}
          batchDownload={true}
          showBatchSign={true}
          onBadgeClick={this.handleBadgeClick}
          onChange={this.handleChange}
          selectedFileId={'917195815410163713'}
        />
        <h3>附件列表 - 左侧列表模式，支持拖拽排序</h3>
        <Upload
         
          data={data}
          sortable={true}
          uploadParams={{
            module: 'document',
          }}
          type={'inside'}
          batchDelete={true}
          batchDownload={true}
          showBatchSign={true}
          onBadgeClick={this.handleBadgeClick}
          onChange={this.handleChange}
          uploadingData={uploadingdata}
          selectedFileId={'917195815410163713'}
        />
      </div>
    );
  }
}

export default Demo;
```

### 附件附加提示

组件默认读取：【后台管理中心】-【全局基础】-【文件设置】-【附件设置】-【附件附加提示】设置，支持通过 props.isUploadCustomMsg、props.uploadCustomMsg 覆盖全局配置

```jsx
import React, { ReactNode } from 'react';
import { Button, Icon, Input, Upload } from "@weapp/ui";

const uploadParams = {
  module: 'document'
}

const inputStyle = { width: '200px' }
const outStyle = { outline: '#E5E5E5 dashed 2px' }

class Demo extends React.Component<{}, any> {

  state = {
    isUploadCustomMsg: true,
    uploadCustomMsg: '本平台为非涉密平台，严禁处理、传输国家秘密及核心商密内容',
  }

  componentDidMount() {
    Upload.getSystemUploadConfigAsync().then(res => {
      if (res.uploadCustomMsgEnable) {
        this.setState({
          isUploadCustomMsg: res.uploadCustomMsgEnable,
          uploadCustomMsg: res.uploadCustomMsg,
        })
      }
    })
  }

  renderUploadButton = (eventProps: any, inputDom: ReactNode) => {
    const { onClick, onPaste, ...restProps } = eventProps
    return <div {...restProps} style={outStyle}>
      <Button
       
        type="primary"
        onClick={onClick}
        {...restProps}
      >
        <Icon name="Icon-upload02"/>
        {'自定义上传按钮'}
        {inputDom}
      </Button>
      <Input
       
        placeholder="粘贴上传"
        style={inputStyle}
        onPaste={onPaste}
      />
      <span style={{ marginLeft: '20px' }}>(点击或拖拽上传)</span></div>
  }

  render() {
    const { isUploadCustomMsg, uploadCustomMsg, } = this.state;
    return <div>
      <h3>默认</h3>
      <Upload
        isUploadCustomMsg={isUploadCustomMsg}
        uploadCustomMsg={uploadCustomMsg}
       
        uploadParams={uploadParams}
      />
      <h3>图片 - 图片列表横向</h3>
      <Upload
        isUploadCustomMsg={isUploadCustomMsg}
        uploadCustomMsg={uploadCustomMsg}
       
        buttonType={'image'}
        listType={'img'}
        uploadParams={uploadParams}
      />
      <h3>图片 - 图片列表纵向</h3>
      <Upload
        isUploadCustomMsg={isUploadCustomMsg}
        uploadCustomMsg={uploadCustomMsg}
       
        buttonType={'image'}
        listType={'img'}
        imgListType={'horizontal'}
        uploadParams={uploadParams}
      />
      <h3>图片 - 上传按钮与图片列表一行展示</h3>
      <Upload
        isUploadCustomMsg={isUploadCustomMsg}
        uploadCustomMsg={uploadCustomMsg}
       
        buttonType={'image'}
        listType={'img'}
        isUpdaterLineOfRow={true}
        uploadParams={uploadParams}
      />
      <h3>拖拽模式</h3>
      <Upload
        isUploadCustomMsg={isUploadCustomMsg}
        uploadCustomMsg={uploadCustomMsg}
       
        buttonType={'drag'}
        uploadParams={uploadParams}
        uploadTitle={'点击或将文件拖拽到这里上传'}
        dragInfo={"支持扩展名: Word，PDF，Jpeg，Png 等文件格式 （单个文件大小小于 50M）"}
        limitType={'.pdf,.doc,.docx,.png,.jpg,.jpeg'}
        maxCount={50}
      />
      <h3>简易模式</h3>
      <Upload
       
        isUploadCustomMsg={isUploadCustomMsg}
        uploadCustomMsg={uploadCustomMsg}
        uploadParams={uploadParams}
        type={'simple'}
      />
      <h3>侧边列表模式</h3>
      <div style={{ width: '250px' }}>
        <Upload
          isUploadCustomMsg={isUploadCustomMsg}
          uploadCustomMsg={uploadCustomMsg}
         
          type={'inside'}
          uploadParams={uploadParams}
        />
      </div>
      <h3>表格模式</h3>
      <Upload
        isUploadCustomMsg={isUploadCustomMsg}
        uploadCustomMsg={uploadCustomMsg}
       
        type={'table'}
        uploadParams={uploadParams}
        tableTitle={'附件列表'}
      />
      <h3>自定义按钮 - Children（鼠标悬浮提示）</h3>
      <h5>自定义上传按钮时，文本提示将默认修改为悬浮提示。</h5>
      <Upload
        isUploadCustomMsg={isUploadCustomMsg}
        uploadCustomMsg={uploadCustomMsg}
       
        uploadParams={uploadParams}
      >
        <Button>我是一个上传按钮</Button>
      </Upload>
      <h3>自定义上传按钮 - renderUploadButton（鼠标悬浮提示）</h3>
      <Upload
        isUploadCustomMsg={isUploadCustomMsg}
        uploadCustomMsg={uploadCustomMsg}
        renderUploadButton={this.renderUploadButton}
        uploadParams={uploadParams}
      />
      <h3>自定义上传按钮 - renderUploadButton（文本提示）</h3>
      <h5>自定义上传按钮时，如果需要展示文本提示，可以设置 uploadCustomMsgTips 为 true。</h5>
      <Upload
        isUploadCustomMsg={isUploadCustomMsg}
        uploadCustomMsg={uploadCustomMsg}
        renderUploadButton={this.renderUploadButton}
        uploadParams={uploadParams}
        uploadCustomMsgTips={true}
      />
      <h3>自定义上传按钮 - renderUploadButton（弹框提示）</h3>
      <h4>自定义上传按钮时，可以设置 isSelectFileConfirm 为 true 启用弹框提示</h4>
      <Upload
       
        isUploadCustomMsg={isUploadCustomMsg}
        uploadCustomMsg={uploadCustomMsg}
        uploadParams={uploadParams}
        uploadCustomMsgPopover={false}
        isSelectFileConfirm={true}
      >
        <Button>我是一个上传按钮</Button>
      </Upload>
    </div>;
  }
}

export default Demo;
```

### 按组预览图片

```jsx
import { Component, createRef } from 'react';
import { Upload, SecretSelect, Button } from '@weapp/ui';

class UploadDemo extends Component<any> {

  uploadInsRef = createRef<any>()

  startUpload = () => {
    this.uploadInsRef?.current?.startUpload()
  }

  handleChange = (data: any) => {
    console.error(data)
  }

  render() {
    return (
      <div>
        <h3>按组预览图片（下方两个附件上传为同一组）</h3>
        <h4>上传按钮一</h4>
        <Upload
         
          multiple={true}
          uploadParams={{
            module: 'document'
          }}
          groupId={'group-1'}
          buttonType={'image'}
          listType={'img'}
          imgListType={'horizontal'}
          limitType={'png,jpg,jpeg'}
        />
        <h4>上传按钮二</h4>
        <Upload
         
          multiple={true}
          uploadParams={{
            module: 'document'
          }}
          groupId={'group-1'}
          listType={'list'}
          imgListType={'horizontal'}
          limitType={'png,jpg,jpeg'}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 文件选择后拦截

在文件选择后触发上传前拦截文件上传，或修改附件名称

```jsx
import { Component, createRef } from 'react';
import { Upload } from '@weapp/ui';

class UploadDemo extends Component<any> {

  uploadInsRef = createRef<any>()

  startUpload = () => {
    this.uploadInsRef?.current?.startUpload()
  }

  handleChange = (data: any) => {
    console.error(data)
  }
  index = 0;
  onAfterChooseFile = (file: File) => {
    this.index++;
    console.log(file);
    return { name: this.index };
  }

  render() {
    return (
      <div>
        <Upload
         
          multiple={true}
          uploadParams={{
            module: 'document'
          }}
          afterChooseFile={this.onAfterChooseFile}
        />
      </div>
    );
  }
}

export default UploadDemo;
```

### 自定义文件上传内容

自定义选择文件上传，支持File及Base64格式

```jsx
import {base64Data,base64Data1} from '../mock'
import {useState} from 'react';
import {Dialog, Input, MDialog, MUpload, Textarea, Upload, UploadBase64Data, UploadData} from '@weapp/ui'
const CusChooseFile = (props:any) => {
    const [imageData, setImageData] = useState(base64Data)
    const [fileName, setFileName] = useState('测试1.png')
    const [uploadData,setUploadData]= useState([] as any[]);
    let customChooseFile = (params?:any) => {
        return new Promise<{
            base64: UploadBase64Data | UploadBase64Data[]
        }>((resolve, reject) => {
            const {reUpload} = params||{};
            // 模拟 app 自定义文件选择
            Dialog.confirm({
                content: reUpload ? '重新上传' :'自定义文件选择',
                onOk: () => {
                    // 返回 file 或者 base64
                    resolve({
                        base64: [{
                            base64: reUpload?base64Data1:imageData,
                            fileName: fileName
                        }]
                    })
                },
                onCancel: () => {
                    reject(false);
                }
            })
        });
    }
    let onChangeName= (v:any)=>{
        setFileName(v)
    }
    let onChangeFile = (data?:UploadData[], uploading?:UploadData[],reUpload?: boolean)=>{
        setUploadData(data||[])
    }
    return (
        <div>
            <div style={{display: 'flex', gap: '16px',overflow:"hidden"}}>
                <div>
                    <div>base64图片：</div>
                    <img src={imageData} alt=""/>
                </div>
                <div style={{flex: 1}}>
                    <div>base64图片内容：</div>
                    <div>
                        文件名：<Input value={fileName} onChange={onChangeName}/>
                    </div>
                    <Textarea
                       
                        value={imageData}
                        onChange={setImageData}
                        style={{width:"100%",height:"90%"}}
                    />
                </div>

            </div>
            <div>
                <div>文件上传</div>
                <Upload
                    customChooseFile={customChooseFile}
                        uploadParams={{
                            module: 'document'
                        }}
                        data={uploadData}
                        onChange={onChangeFile}
                />
            </div>
        </div>
    )
}

export default CusChooseFile
```

### 图片压缩

```jsx
import {Component, createRef} from 'react';
import {Textarea, Upload} from '@weapp/ui';

const uploadParams = {
    module: 'document'
}

class UploadDemo extends Component<any> {
    state = {
        browserImageCompressionConfig:JSON.stringify({
            initialQuality: 0.5,
            minSize: 5*1024 * 1024,//文件大于5M的图片会进行压缩
            maxWidthOrHeight: 1920,
            usePlugin:"browser-image-compression"
        }),
        CompressorConfig:JSON.stringify({
            quality: 1,
            minSize: 5*1024 * 1024,//文件大于5M的图片会进行压缩
            strict: true,
            usePlugin: "Compressor"
        }),
        upload1:[],
        upload2:[],
        upload3:[],
        upload4:[],
        upload5:[],
        upload6:[],
    }

    uploadInsRef = createRef<any>()

    startUpload = () => {
        this.uploadInsRef?.current?.startUpload()
    }

    handleChange = (type:string) => {
        return (data: any)=>{
            this.setState({
                [type]:data
            })
        }
    }

    onChangeConfig = (type: any) => {
        return (value:string)=>{
            this.setState({
                [type]:value
            })

        }
    }

    render() {
        const {browserImageCompressionConfig, CompressorConfig} = this.state;
        let browserImageCompressionConfigData = {};
        try {
            browserImageCompressionConfigData = JSON.parse(browserImageCompressionConfig)
        }catch (e){

        }
        let CompressorConfigData = {};
        try {
            CompressorConfigData = JSON.parse(CompressorConfig)
        }catch ( e){}
        return (
            <div>
                <div>
                    <h2>原图：</h2>
                    <Upload
                       
                        listType="img"
                        buttonType="image"
                        imgListType="horizontal"
                        uploadParams={uploadParams}
                        limitType='png,jpg,jpeg'
                        data={this.state.upload1}
                        onChange={this.handleChange('upload1')}
                    />
                </div>
                <div>
                    <h2>前端browser-image-compression压缩：</h2>
                    <div>支持多线程，如果参数设置不合适会慢，保留原格式</div>
                    <div>
                        配置参考：https://www.npmjs.com/package/browser-image-compression
                    </div>
                    <div>
                        <Textarea
                            value={browserImageCompressionConfig}
                            onChange={this.onChangeConfig('browserImageCompressionConfig')}
                        />
                    </div>
                    <Upload
                       
                        listType="img"
                        buttonType="image"
                        imgListType="horizontal"
                        uploadParams={uploadParams}
                        limitType='png,jpg,jpeg'
                        jsCompressImg
                        //@ts-ignore
                        jsCompressImgOptions={browserImageCompressionConfigData}
                        data={this.state.upload2}
                        onChange={this.handleChange('upload2')}
                    />
                    <Upload
                            uploadParams={uploadParams}
                            limitType='png,jpg,jpeg'
                            jsCompressImg
                        //@ts-ignore
                            jsCompressImgOptions={browserImageCompressionConfigData}
                            data={this.state.upload3}
                            onChange={this.handleChange('upload3')}
                    />
                </div>
                <div>
                    <h2>前端Compressor.js压缩：</h2>
                    <div> 速度快，效果差，canvas.toBlob压缩，除jpg格式和wedp格式，其他都会转换成jpg</div>
                    <div>
                        配置参考：https://www.npmjs.com/package/compressorjs
                    </div>
                    <div>
                        <Textarea
                            value={this.state.CompressorConfig}
                            onChange={this.onChangeConfig('CompressorConfig')}
                        />
                    </div>
                    <Upload
                       
                        listType="img"
                        buttonType="image"
                        imgListType="horizontal"
                        uploadParams={uploadParams}
                        limitType='png,jpg,jpeg'
                        jsCompressImg
                        //@ts-ignore
                        jsCompressImgOptions={CompressorConfigData}
                        data={this.state.upload4}
                        onChange={this.handleChange('upload4')}
                    />
                    <Upload
                            uploadParams={uploadParams}
                            limitType='png,jpg,jpeg'
                            jsCompressImg
                        //@ts-ignore
                            jsCompressImgOptions={CompressorConfigData}
                            data={this.state.upload5}
                            onChange={this.handleChange('upload5')}
                    />
                </div>
                <div>
                    <h2>后端压缩：</h2>
                    <Upload

                            listType="img"
                            buttonType="image"
                            imgListType="horizontal"
                            isCompressImg={true}
                            uploadParams={uploadParams}
                            limitType='png,jpg,jpeg'
                            data={this.state.upload6}
                            onChange={this.handleChange('upload6')}
                    />
                </div>
            </div>
        );
    }
}

export default UploadDemo;
```

## API

### 上传接口返回数据格式如下：

```
{
data: {
  fileid: 文件ID,
  name: 文件名,
  size: 文件大小,
  extName: 文件后缀名,
  type: minetype类型,
  isImg: 是否是图片,
  uploadUser: 上传人id,
  uploadUserName: 上传人姓名,
  uploadTime: 上传时间,
  options: [{ // 操作按钮配置
    icon: 'xxx',
    content: '预览',
    id: 'xxx'
  },{
    icon: 'xxx',
    content: '编辑',
    id: 'xxx'
  }],
  ...
},
msg:'信息',
status: true/false
}
```

### 文件上传接口文档(初版,后续会有调整)

[接口文档](https://www.e-cology.com.cn/spa/document/index.jsp?id=7775471&isfromchatshare=1&sharer=22966&firstSharer=&jumpTab=&em_auth_code=55d6de42-3626-465b-87af-36396bc723cb&router=1#/main/document/detail?_key=zfx2z4)

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |  |  |
| --- | --- | --- | --- | --- | --- | --- |
| type | 上传模式(默认、简易，需要注意到的是，简易模式下，listType 和 buttonType 会失效，只以按钮上传，并仅支持 list 展示) | `default` \| `simple` | 否 | `default` |  |  |
| fileDataName | 上传附件参数名称 | string | 否 | `file` |  |  |
| data | 附件数据 | UploadData[] | 否 |  |  |  |
| uploadingData | 待上传附件数据 | UploadData[] | 否 |  |  |  |
| headers | 接口请求的 header | UploadRequestHeader | 否 |  |  |  |
| uploadTitle | 上传图标（按钮）显示名称 | string | 否 |  |  |  |
| uploadUrl | 文件上传服务器接口地址 | string | 否 |  |  |  |
| reUploadUrl | 文件重新上传服务器接口地址 | string | 否 |  |  |  |
| wrap | 是否换行 | string | 否 |  |  |  |
| uploadParams | 上传参数 (一级，多级请自行转 JSONString) | object \| ((file: IFile \| string \| Blob) => object) | 否 |  |  |  |
| maxCount | 限制文件个数 | number | 否 |  |  |  |
| maxSize | 最大上传大小限制，单位为 MB | number | 否 |  |  |  |
| minSize | 最小上传大小限制，单位为 MB | number | 否 |  |  |  |
| totalMaxSize | 总上传大小限制，单位为 MB | number | 否 |  |  |  |
| limitType | 允许上传的文件类型，文件后缀名以逗号隔开 | string | 否 |  |  |  |
| autoUpload | 自动上传或手动批量上传 | boolean | 否 |  |  |  |
| sortable | 是否可拖拽排序(list 不允许动态改变，需要在初始确认好是否开启拖拽) | boolean | 否 |  |  |  |
| onSortEnd | 拖拽回调事件 | (data?: UploadData[]) => void | 否 |  |  |  |
| listType | 已上传附件列表展现形式 | 'list' \| 'img' | 否 | 'list' |  |  |
| imgListType | 图片列表横向排列或纵向排列 移动端不支持该参数 | 'horizontal' \| 'vertical' | 否 |  |  |  |
| imgOptionType | 图片列表横向排列时选项位置 | 'bottom' \| 'right' | 否 |  |  |  |
| showUpload | 是否启用显示上传附件按钮 | boolean | 否 | true |  |  |
| imgStyle | 图片样式 | CSSProperties | 否 |  |  |  |
| prohibitType | 禁止上传的文件类型，文件后缀名以逗号隔开 | string | 否 |  |  |  |
| directory | 是否支持选择目录上传 | boolean | 否 |  |  |  |
| dragUpload | 是否支持拖拽上传 | boolean | 否 |  |  |  |
| pasteUpload | 是否支持粘贴上传 | boolean | 否 |  |  |  |
| pastePlaceholder | 粘贴上传提示信息 | string | 否 | 粘贴文件(Ctrl+V) |  |  |
| buttonType | 上传按钮类型 | `default`(默认上传区域) \| `image`(图片上传区域)\| `drag`(拖拽强调上传区域)\|`basic`(标准上传按钮，用于表单模块覆盖简易模式的按钮) | 否 |  |  |  |
| isUpdaterLineOfRow | 上传按钮与图片一行显示（仅当 buttonType 为 `image`，listType 为 `img` 时可用 | boolean | 否 | true |  |  |
| showListUploaded | 显示已上传文件列表 boolean | 否 | true |  |  |  |
| showListUploading | 显示上传中文件列表 | boolean | 否 | true |  |  |
| disabled | 禁用上传 (禁用的时候应该是只有下载，预览，查看历史版本以及签署的权限，模块自定义权限不做控制，请在禁用时自行屏蔽) | boolean | 否 | false |  |  |
| readOnly | 是否只读 (只读的时候应该是只有下载，预览，查看历史版本以及签署的权限，模块自定义权限不做控制，请在只读时自行屏蔽) | boolean | 否 | false |  |  |
| multiple | 单选多选 | boolean | 否 | true |  |  |
| onChange | 组件状态变化，抛出最新列表 （返回参数：data：已上传列表。dataing：带上传列表，reUpload：是否重新上传返回内容 | (data?: UploadData[],uploading?:UploadData[],reUpload?:boolean) => void | 否 |  |  |  |
| onDelete | 删除的回调 | () => void | 否 |  |  |  |
| renderListUploaded | 自定义渲染已上传列表 | (data?: UploadData[]) => ReactNode | 否 |  |  |  |
| renderListUploading | 自定义渲染待上传列表 | (data?: UploadData[]) => ReactNode | 否 |  |  |  |
| onStart | 开始上传回调 | (file: IFile) => void | 否 |  |  |  |
| customRequest | 自定义上传请求 | (option: UploadRequestOption) => void | 否 |  |  |  |
| customErrorInfo | 自定义上传错误提示信息 | (file: IFile, type: number) => string | 否 |  |  |  |
| customSuccessInfo | 自定义上传成功提示信息 | (file: IFile, type: number) => string | 否 |  |  |  |
| customRenameInfo | 自定义重命名完成提示信息 | (data: ListData, type: string, response?: any) => string | 否 |  |  |  |
| customDeleteInfo | 自定删除完成提示信息 | (data: ListData, type: string, response?: any) => string | 否 |  |  |  |
| renderUploadButton | 自定义上传按钮 | (eventProps: any, inputDom: ReactNode) => ReactNode | 否 |  |  |  |
| children | 自定义上传按钮 | ReactNode | 否 |  |  |  |
| onUploading | 上传状态回调 | (status:string,listT:UploadData[],listB:ListData[]) => void status:'uploading'\|\|'uploaded' |  |  |  |  |
| onError | 上传失败回调 | (file: File, errorInfo:string,response:any) => void |  |  |  |  |
| onSuccess | 上传成功回调 | (file: File, errorInfo:string,response:any, data?: UploadData) => void |  |  |  |  |
| dragInfo | 拖拽上传区域内容 | ReactNode |  | 点击或拖拽上传 |  |  |
| multipartSize 【⚠️ 废弃】 | 当文件大小超过多大（单位 M）时开启分片上传(为 0 时关闭分片上传) | number |  | 8 |  |  |
| chunkSize 【⚠️ 废弃】 | 分片大小（单位 M） | number |  | 4 |  |  |
| showSignButtons | 是否显示签署按钮 | boolean |  | false |  |  |
| showDelete | 是否显示删除按钮 | boolean | 否 | true |  |  |
| showEdit | 是否显示编辑按钮 | boolean | 否 | true |  |  |
| showRename | 是否显示重命名按钮 | boolean | 否 | true |  |  |
| showReUpload | 是否显示重新上传按钮 | boolean | 否 | true |  |  |
| showPreview | 是否可以预览 | boolean | 否 | true |  |  |
| showDownload | 是否显示下载按钮 | boolean | 否 | true |  |  |
| showVersion | 是否显示历史版本按钮 | boolean | 否 | true |  |  |
| uploadedOptionsWhites | 已上传文件操作按钮配置白名单 | string[] | 否 | - |  |  |
| uploadedOptionsBlacks | 已上传文件操作按钮配置黑名单 | string[] | 否 | - |  |  |
| uploadingOptionsWhites | 待上传文件操作按钮配置白名单 | string[] | 否 | - |  |  |
| uploadingOptionsBlacks | 待上传文件操作按钮配置黑名单 | string[] | 否 | - |  |  |
| isDeleteInterface | 组件内删除是否走接口 | boolean | 否 | false |  |  |
| deleteUrl | 自定义删除 api | string | 否 | '' |  |  |
| deleteParams | 删除接口参数 | AnyObj | 否 | {} |  |  |
| isDeleteConfirm | 删除前是否确认 | boolean | 否 | false |  |  |
| onDeleteCancel | 删除取消回调 | () => void | 否 |  |  |  |
| onDeleteSure | 删除确认回调 | (item: UploadData, listT: UploadData[], listB: ListData[]) => void | 否 |  |  |  |
| onUploadCancle | 文件上传取消上传时回调 | (item: UploadData, listT: UploadData[], listB: ListData[]) => void | 否 |  |  |  |
| routeId | outeId（用作 corsLink，非必须，不指定时，组件内部随机生成） | string | 否 |  |  |  |
| isListTShowImage | 作为列表展示时，已上传列表中图片是否单独一行展示 | boolean | 否 |  |  |  |
| onOptionClick | options 事件回调(通过第一个参数判断事件类型) | (value: string \| SelectOptionData, fileData: UploadData, fileIndex: number) => void | 否 |  |  |  |
| onBeforeOptionClick | options 事件触发前回调(通过第一个参数判断事件类型) | (value: string \| SelectOptionData, fileData: UploadData, fileIndex: number) => void \| boolean \| Promise<any> | 否 |  |  |  |
| batchUploadCompleted | 批量上传完成回调 | (successFiles: IFile[], failedFiles: IFile[]) => void | 否 |  |  |  |
| disabledType | 只读、禁用类型(`hidden` 在 upload readOnly 和 disabled 时，直接隐藏按钮，`disabled` 则只是把按钮置灰) | `hidden` \| `disabled` | 否 | `hidden` |  |  |
| timeout | 超时设置 | number | 否 | 30000 |  |  |
| loginFree | 免登录标识(免登陆目前仅支持上传（分片上传）、重上传、预览、下载)【注意：如果要使用上免登陆的上传功能，必须通过 `uploadParams` 传递 `tenantKey`，但此时客户没有登陆，所有取不到 `tenantKey`，可以随便 `all_teams`，后端不做校验】 | boolean | 否 |  |  |  |
| onUploadComplete | 上传完成回调 | (successFiles: UploadData[], failedFiles: UploadData[], total?: number, otherParams?: AnyObj) | 否 |  |  |  |
| commonParams | 接口通用参数（该 api 的参数，会添加到所有上传组件相关接口中，一级，多级请自行转 JSONString） | AnyObj | 否 | - |  |  |
| renderUplodingContentL | 自定义渲染待上传列表左侧 | (item: UploadData, eventProps?: any, otherParams?: AnyObj) => ReactNode | 否 | - |  |  |
| renderUplodingContentR | 自定义渲染待上传列表右侧 | (item: UploadData, eventProps?: any, otherParams?: AnyObj) => ReactNode | 否 | - |  |  |
| renderContentUploadedL | 自定义渲染已上传列表左侧 | (item: UploadData, eventProps?: any, otherParams?: AnyObj) => ReactNode | 否 | - |  |  |
| renderContentUploadedR | 自定义渲染已上传列表右侧 | (item: UploadData, eventProps?: any, otherParams?: AnyObj) => ReactNode | 否 | - |  |  |
| renderContentUpload | 移动端自定义渲染已上传列表 | (item: UploadData, eventProps?: any, otherParams?: AnyObj) => ReactNode | 否 | - |  |  |
| renderUploadingContent | 移动端自定义渲染待上传列表 | (item: UploadData, eventProps?: any, otherParams?: AnyObj) => ReactNode | 否 | - |  |  |
| checkSensitiveWords | 是否启用敏感词检测功能 | boolean | 否 | true |  |  |
| dragHighlight | 拖拽进入页面时，拖拽区域自动高亮 | boolean | 否 | false |  |  |
| dragGlobal | 拖拽进入页面时，悬浮显示拖拽区域（当页面只有一共上传按钮组件时，自动开启给功能） | boolean | 否 | false |  |  |
| showUploadTime | 是否显示上传时间 | boolean | 否 | true |  |  |
| showUploader | 是否显示上传人 | boolean | 否 | true |  |  |
| showFileSize | 是否显示附件大小 | boolean | 否 | true |  |  |
| secLevelDisplayFormat | 密级显示格式（1:密级+期限；2:仅密级） | number | 否 | 1 |  |  |
| showBatchSign | 是否显示批量签署按钮 (当 listType 为 img 时一律不显示批量签署按钮) | boolean |  | false |  |  |
| batchDelete | 批量删除 (当 listType 为 img 时一律不显示批量签署按钮)【tips：暂不支持组件内接口，计划八月底支持组件内调用接口】 | boolean |  | false |  |  |
| batchDownload | 批量下载 (当 listType 为 img 时一律不显示批量签署按钮) | boolean |  | false |  |  |
| listOptionType | 列表操作栏选项 | optionHover ,optionCover,normal | 否 | 'optionHover' |  |  |
| optionHoverPosition(废弃) | 此 api 已废弃,不生效 |  | 否 | - |  |  |
| batchDeleteURL | 批量删除 url 配置（目前组件内置 url 为业务 url，文档模块使用需要自行配置文档模块专用 url，传递的 url 按照该类型传递：`/{api}/file/dl`，`{api}` 会自动匹配 pc 的 `api` 和移动端的 `api/app`) | string |  | `/{api}/file/business/dl` |  |  |
| checkName | 启用附件名称校验功能 | boolean | 否 | false |  |  |
| directoryId | 校验附件的目录 | string | 否 | - |  |  |
| customRenderFileIcon | 自定义渲染文件图标 | (extName?: string, item?: UploadData \| IFile) => ReactNode | 否 | - |  |  |
| renderUploadTips | 自定义渲染提示语 | (limitType?: string, maxSize?: number, maxCount?: number) => String | 否 | - |  |  |
| displayTip | 是否显示提示语（只读/禁用/自定义上传按钮/传递了 dragInfo 时不生效） | boolean | 否 | false |  |  |
| onUploadFinally | 上传结束事件（所有操作都结束才会触发） | () => void | 否 | - |  |  |
| operateButtonStyle | 已上传列表操作按钮样式 | CSSProperties | 否 | {} |  |  |
| beforeUploadFile | 传前拦截事件（在文件上传接事件前触发，可以通过该事件在文件上传前最后一次复写 uploadParams） | (file: IFile, uploadParams?: AnyObj) => boolean \| AnyObj \| Promise<boolean \| AnyObj> | 否 | - |  |  |
| requestHeaderParams | 接口 headers 参数 | AnyObj | 否 |  |  |  |
| isCompressImg | 图片上传压缩（开启后，上传的是压缩图，预览无法看到原图） | boolean | 否 | false |  |  |
| jsCompressImg | 图片是否开启前端压缩 | boolean | 否 |  |  |  |
| jsCompressImgOptions | 前端压缩图片配置 | 配置参考下方jsCompressImgOptions | 否 |  |  |  |
| onUploaderClick | 上传按钮点击事件 | () => void | 否 | - |  |  |
| thumbnailFormat | 缩略图展示类型 | `small`: 小图（不压缩） \| `big`: 大图（不压缩） \| `imagePreview`: 原图（不压缩） \| `high`: 质量压缩-高 \| `medium`: 压缩质量-中 \| `low`: 压缩质量-低 \| `image`: 跟随系统设置 | 否 | `small` |  |  |
| retryCount | 分片上传失败（网络原因）自动重试次数（默认 2） | number | 否 | 2 |  |  |
| retryDelay | 分片上传失败（网络原因）自动重试延迟（默认 300）【仅 pc 浏览器声生效】 | number | 否 | 300 |  |  |
| batchDownloadParams | 批量下载接口参数(传递 zipName 自定义压缩包名称) | AnyObj | 否 | {} |  |  |
| batchDeleteParams | 批量删除接口参数 | AnyObj | 否 | {} |  |  |
| downloadParams | 下载接口参数 | AnyObj | 否 | {} |  |  |
| previewParams | 预览接口参数 | AnyObj | 否 | {} |  |  |
| editParams | 编辑接口参数 | AnyObj | 否 | {} |  |  |
| renameParams | 重命名接口参数 | AnyObj | 否 | {} |  |  |
| isUploadCustomMsg | 附件附加提示开关 | boolean | 否 |  |  |  |
| uploadCustomMsgPopover | 附件附加提示 popover 开关（仅自定义上传按钮生效） | boolean | 否 | true |  |  |
| uploadCustomMsgTips | 附件附加文本提示开关（仅自定义上传按钮生效，为 true 时将不会显示悬浮提示，优先级高于 uploadCustomMsgPopover） | boolean | 否 | false |  |  |
| uploadCustomMsg | 附件附加提示 | string | 否 | '' |  |  |
| isCustomThumbnailUrl | 是否自定义缩略图地址（为 true 时会取附件数据中的 imgUrl） | boolean | 否 | false |  |  |
| beforeBatchDownload | 批量下载触发前事件 | (params: AnyObj) => AnyObj \| boolean \| Promise<AnyObj \| boolean> | 否 | - |  |  |
| isSelectFileConfirm | 是否开启选择文件前弹框确认提示 | boolean | 否 |  |  |  |
| selectFileConfirmTitle | 选择文件前弹框确认提示内容（开启系统附件上传提示开关后，默认会读取系统附件上传提示内容） | string | 否 |  |  |  |
| afterChooseFile | 选择文件后事件（可用于拦截部分文件上传或修改附件名称） | afterChooseFile?: (file: File) => boolean \| AnyObj; | 否 |  |  |  |
| qrcodeUrl | 二维码地址 | string | 否 |  |  |  |
| qrcodeTitle | 二维码提示信息 | string | 否 |  |  |  |
| onBeforeQrcodeClick | 拦截二维码点击事件 | () => void | 否 |  |  |  |
| onInputClick | 附件上传按钮点击事件 | (e: any) => void | 否 |  |  |  |
| customChooseFile | 自定义文件选择 | () => Promise<{ file?: File | FileList, base64?: base64Data | base64Data[] }> | 否 |  |
| systemUploadConfigParams | 系统上传配置，免登时传，tenantKey | AnyObj | 否 |  |  |  |
| concurrentUploadLimit | 并发上传限制个数 | number | 否 | 5 |  |  |
### 免登录标识 loginFree

loginFree 用于设置是否免登录，其中

- 上传地址： /papi/file/module/upload，模块通过  uploadParams  传递  tenantKey
- 重新上传地址： /papi/file/reUpload，模块通过  uploadParams  传递  tenantKey
- 预览地址： '/papi/app/file/preview'  '/papi/file/preview'
- 下载地址： /papi/file/remotedownload/${fileid}/upload/${true}

需要注意的是，如果是自定义上传地址（重新上传地址），那么免登录需要模块自行通过 uploadUrl/reUploadUrl 进行地址设置。

### Upload.filePreview

Upload 提供文件预览方法： Upload.filePreview，必传参数当前预览文件 id（fileId）。

```
  fileId: string;  // 当前预览文件 id
  fileIds?: string[];  // 一组图片文件 id
  isImage?: boolean;  // 是否图片预览
  groupId?: string; // 图片预览分组（优先级高于 fileIds）
  loginFree?: boolean;  // 免登录标识
  onError?: (() => void);  // 失败回调
```

特殊情况：
1. 当预览图片时，需要传递 isImage: true 开启图片预览。
2. 非分组预览图片时，需要主动传递 fileIds，内容为预览一组图片的文件 id。（由于图片预览调用的 PhotoView 组件导致的特殊性）。
3. 非组预览图片时，无需传递 fileIds，改为传递 groupId，会自动查询页面上的同组图片地址进行预览
4. 在自定义渲染图片时，如需按组预览图片，可以给 img 标签加上以下四个方法，然后调用 filePreview

```
data-group // groupId
data-id  // fileId
data-imgsrc  // 图片地址（没有的话，会用 fileId 自动拼接）
data-download  // 是否能下载（没有的话默认能下载）
```

## Upload.download

Upload 提供文件下载方法： Upload.download，必传参数当前预览文件 id（fileId）。

```
  fileId: string;  // 当前预览文件 id
  module?: string;  // 模块标识
  loginFree?: boolean;  // 免登录标识
  params?: AnyObj;  // 自定义接口参数
```

## Upload.batchDownload

Upload 提供文件下载方法： Upload.batchDownload，必传参数当前预览文件 ids。

```
  loginFree?: boolean,//是否免登
  module?: string,//模块
  ids: string[],//文件id
  commonParams?: AnyObj,//公共参数
  batchDownloadParams?: AnyObj,//批量下载参数
  downloadParams?: AnyObj,//下载参数
  setShowProgress: (isShow: boolean) => void;//显示下载进度图标回调
  setPercent: (percent: number) => void;//下载进度回调
  setTotal: (total: number) => void;//下载总数回调
  beforeBatchDownload?: (params: AnyObj) => AnyObj | boolean | Promise<AnyObj | boolean>;//下载之前拦截回调
  isMobile?: boolean;//移动端
  hideProgress?: boolean;//是否隐藏下载进度，自己实现下载进度
```

### 注意事项

#### onDelete 与 onChange 执行顺序

删除时，组件内部先触发的 onDelete 回调，再触发的 onChange 回调

#### 自定义提示信息

上传成功提示在 onSuccess 时不会触发，由模块自行处理。同理还有删除完成提示，重命名完成提示。

#### routeId 的使用

在 dialog 中使用 upload 可能会出现点击 options 里面的批量签署，历史版本等选项时，路由跳转不正确。这个问题的解决方案就是给 upload 组件传递固定的 routeId。

### 已上传列表数据示例

```js
export const data = [
  {
    fileid: "1",
    name: "首页.png",
    extName: "png",
    size: 4582,
    signTip: "签署中",
    img: true,
    uploadUserName: "管理员",
    uploadTime: "2022-02-24T17:21:28.968+08:00",
    loadlink:
      "",
    options: [
      {
        id: "download",
        icon: "Icon-download02",
        content: "下载",
      },
      {
        id: "edit",
        icon: "Icon-daily-o",
        content: "编辑",
      },
      {
        id: "delete",
        icon: "",
        content: "删除",
      },
      {
        id: "preview",
        icon: "Icon-download02",
        content: "预览",
      },
      {
        id: "rename",
        icon: "Icon-edit-o",
        content: "重命名",
        moreType: true,
      },
      {
        id: "version",
        icon: "Icon-Unfinished-business",
        content: "历史版本",
        moreType: true,
      },
      {
        id: "reupload",
        icon: "Icon-Left-refresh",
        content: "重新上传",
        moreType: true,
      },
    ],
  },
  {
    fileid: "2",
    name: "考勤报表的名字超长名字超长名字超长名字超长名字超长名字超长名字超长名字超长名字超长名字超长.exl",
    extName: "exl",
    size: 45826,
    signTip: "签署完成",
    img: false,
    uploadUserName: "管理员",
    uploadTime: "2022-02-24T17:21:28.968+08:00",
    loadlink:
      "",
    options: [
      {
        id: "download",
        icon: "Icon-download02",
        content: "下载",
      },
      {
        id: "edit",
        icon: "Icon-daily-o",
        content: "编辑",
      },
      {
        id: "delete",
        icon: "",
        content: "删除",
      },
      {
        id: "rename",
        icon: "Icon-edit-o",
        content: "重命名",
        moreType: true,
      },
      {
        id: "version",
        icon: "Icon-Unfinished-business",
        content: "历史版本",
        moreType: true,
      },
      {
        id: "reupload",
        icon: "Icon-Left-refresh",
        content: "重新上传",
        moreType: true,
      },
      {
        id: "signBack",
        icon: "Icon-edit-o",
        content: "拒绝签署",
        moreType: true,
      },
      {
        id: "signFirst",
        icon: "Icon-edit-o",
        content: "对方先签",
        moreType: true,
      },
      {
        id: "share",
        icon: "Icon-edit-o",
        content: "签署地址",
        moreType: true,
      },
      {
        id: "signinv",
        icon: "Icon-edit-o",
        content: "撤销签署",
        moreType: true,
      },
      {
        id: "apply",
        icon: "Icon-edit-o",
        content: "申请签署",
        moreType: true,
      },
      {
        id: "formSign",
        icon: "Icon-edit-o",
        content: "liuc签署",
        moreType: true,
      },
    ],
  },
  {
    fileid: "3",
    name: "考勤报表.ppt",
    extName: "ppt",
    size: 458245333333,
    img: false,
    uploadUserName: "管理员",
    uploadTime: "2022-02-24T17:21:28.968+08:00",
    loadlink:
      "",
    options: [
      {
        id: "delete",
        icon: "",
        content: "删除",
      },
    ],
  },
];
```

## 附件密级

### 使用方法

模块可通过 `` 参数开启附件密级保护，该参数默认 ``。

> 当在系统后台设置（ `` - ``） 中开启 `` 后，该接口返回信息会开启附件密级校验。
> 
> 如系统后台设置未开启 ``，附件上传则不触发附件密级校验，依然会按照普通上传处理。

如触发附件密级校验（后台开启 ``），`` 为必填参数，如未传递，会触发 `` 提示。

如未触发附件密级校验（后台未开启 ``），将按照普通上传处理，前端附件上传将不携带密级参数，后端将附件密级和生成的文档的密级一律设置为公开。

密级确认框默认开启，模块可通过 `` 手动关闭密级确认框（开启本地标密上传后，不会弹出密级确认框）。

关闭密级确认框后，优先读取模块传递的 `` 和 ``，如无传递 ``，将以当前密级等级的默认保密期限进行附件密级设置。

对于待上传附件，密级模式下支持修改当前附件的密级信息（仅 `` 为 `` 时启用），可通过 uploadingOptions 进行统一配置，也可用 item.options 对单个待上传附件进行功能配置。

目前 uploadingOptions 默认配置如下：

```
[
  {
    id: 'editSecLevel',
    icon: 'Icon-daily-o',
    content: getLabel('90913', '修改密级'),
    moreType: true,
  },
  {
    id: 'delete',
    icon: 'Icon-cancel',
    content: getLabel('21778', '删除')
  },
]
```

对于已上传附件，根据 `` 中的 `` 进行密级信息修改的启用：

```
{
  id: 'editSecLevel',
  icon: 'Icon-rename',
  content: '修改密级',
  moreType: true
}
```

### API

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| secretProtect | 是否启用密级保护 | boolean | 否 | false |
| secretConfim | 是否开启密级确认框（最低密级时，默认无确认框，该参数无效） | boolean | 否 | true |
| secretReUploadConfim | 重上传是否开启密级确认框（默认重上传不开启密级确认框，重上传文件密级与原文件密级一致） | boolean | 否 | false |
| secretLevel | 密级等级 | string | 是 | - |
| secretLevelValidity | 保密期限 | string | 否 | - |
| secretLevelInfo | 缺少密级提示 | string | 否 | `请填写密级！` |
| secretLevelHelpTip | 密级填写辅助信息 | string | 否 | `保密期限填写格式：3个月、10年、20年、长期…不能是纯数字` |
| uploadingOptions | 待上传启用功能 | UploadOptionType[] | 否 | 默认支持 `取消上传`、`修改密级` |
| secretLevelDialogProps | 密级确认框配置 | DialogProps | 否 | - |
| secretLevelAutoAdjust | 是否启用密级自动调整 | boolean | 否 | false |
### 获取本地标密配置方法：getAttachmentLocalSecurityInfo

返回结果：

```
{
    isAllow?: boolean;  // 是否开启本地附件标密上传
    verifyFormat?: string;  // 标密格式
}
```

### 主动校验文档标密信息方法：doLocalSecurityValidate（仅 pc）

方法返回的值：

```
[{
  id: string,  // 临时附件 id
  name: string, // 附件的名称
  file: File,  // 附件
  secretLevel: string, // 密级 id
  secretLevelValidity: string,  // 密级期限
  type: number,  // 校验结果类型
  errorMsg: string,  // 错误信息
}]
```

type 对应的值：

```
type 0: 校验通过的附件
type 1: 附件保密等级不符合规范
type 2: 保密等级过高
type 3: 附件密级保密期限不符合规范
type 4: 需要保密期限但是没有设置的附件
```

## 列表复写返回事件说明

### 已上传（renderListUploaded）eventProps 说明

通常情况下，onOptionClick 即满足所有列表功能（除重命名，重命名需要安装 demo：自定义文件列表 中的案例处理）

Tips：如果单独调用功能的事件，需要确认该附件有对应的功能。

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| onOptionClick | 更多操作事件 | (option: SingleType, fileData: ListData, fileIndex: number) => void | 否 | - |
| onDownload | 下载 | (item: UploadData, index?: number) => void | 否 | - |
| onReUpload | 重上传 | (item: UploadData, index?: number) => void | 否 | - |
| onDelete | 删除 | (item: UploadData, index?: number) => void | 否 | - |
| onPreview | 预览 | (item: UploadData, index?: number) => void | 否 | - |
| onEdit | 编辑 | (item: UploadData, index?: number) => void | 否 | - |
| onEditName | 重命名 | (item: UploadData, index?: number) => void | 否 | - |
| onAppeal | 申诉 | (item: UploadData, index?: number) => void | 否 | - |
| onEditSecLevel | 调整密级 | (item: UploadData, index?: number) => void | 否 | - |
| onVersion | 打开历史记录 | (item: UploadData, index?: number) => void | 否 | - |
| onSignFirst | 对方先签 | (item: UploadData, index?: number) => void | 否 | - |
| onSignBack | 退回签署 | (item: UploadData, index?: number) => void | 否 | - |
| onStartSign | 发起签署 | (item: UploadData, index?: number) => void | 否 | - |
| onSignShare | 签署链接 | (item: UploadData, index?: number) => void | 否 | - |
| onNullifySign | 作废签署 | (item: UploadData, index?: number) => void | 否 | - |
| onApplySign | 申请签署 | (item: UploadData, index?: number) => void | 否 | - |
### 待上传（renderListUploading）eventProps 说明

通常情况下，onOptionClick 即满足所有列表功能（如果单独使用调整密级功能，需要先确保密级功能已开启）

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |  |
| --- | --- | --- | --- | --- | --- |
| onOptionClick | 更多操作事件 | (option: string | SelectOptionData, fileData: ListData, fileIndex: number) => void | 否 | - |
| onCancel | 取消上传 | (file: IFile) => void | 否 | - |  |
| onEditSecLevel | 调整密级 | (fileData: IFile, fileIndex: number) => void | 否 | - |  |
## 获取系统附件配置

```javascript
//如果免登情况，需要传入loginFree参数以及params参数，params中需传入租户key：tenantKey
Upload.getSystemUploadConfigAsync(loginFree?: boolean, params?: AnyObj).then((config) => {
  /**
   * "sysMaxSingleUploadSize",  // 单个文件上传大小限制
   * "sysFormatBlacks",  // 系统文件类型黑名单
   * "sysFormatWhites",  // 系统文件类型白名单
   * "sysFormatWhitesEnable",  // 判断当前启用系统白名单还是系统黑名单(true 是白名单)
   * "sysBatchDownload",  // 是否开启批量下载(true 是允许)
   * "sysAppDownload",  // 移动端是否显示下载按钮(false 是允许)
   * “sysUploadCustomMsgEnable”,  // 是否开启自定义上传提示
   * "sysUploadCustomMsg", // 自定义上传提示内容
   */
})
```

## 上传组件内部钩子

### 预览相关

```javascript
// 1. 拦截附件预览事件
// 该钩子将在预览接口前触发，拦截标准的附件预览事件（FilePreview）
regHook('weappUi', 'Upload.filePreview.overwrite', (options) => {
  console.log('预览方法相关参数', options)
  // 自定义预览事件
  // ...
})

// 2. 修改预览接口
// 标准图片预览是直接拼接的地址，因此不会触发该钩子
regHook('weappUi', 'Upload.filePreview.request.overwrite', (options) => {
  console.log('预览接口参数', options)
  // 自定义预览接口，并返回接口信息
  return request({ 
    url: options.url,
    method: options.method,
    params: {
      ...options.params,
      // 自定义参数 ...
    },
    headers: {
      ...options.headers,
      // 自定义 headers ...
    }
  })
})

// 3. 修改文件预览类型
regHook('weappUi', 'Upload.filePreview.showType.overwrite', (options) => {
  console.log('附件类型相关参数', options)
  // videoExtension: Video 组件支持预览的格式
  // audioExtension: Audio 组件支持预览的格式
  // showType: 'video': 播放视频 | 'audio'：播放音频 | 'other'：调用插件预览或直接 window.open 打开预览地址
  const { fileId, fileName, videoExtension, audioExtension, showType } = options;
  return showType;
})

// 4. 拦截图片预览
regHook('weappUi', 'Upload.filePreview.showImage.overwrite', (options) => {
  console.log('图片预览参数', options)
  // 自定义预览方法
  showImage(options.images, options.fIndex);
})

// 5. 拦截视频播放
regHook('weappUi', 'Upload.filePreview.showVideo.overwrite', (options) => {
  console.log('视频预览参数', options)
  const { url, otherParams, isMobile } = options;
  isMobile ? MVideo.showVideo(url, otherParams) : Video.showVideo(url, otherParams);
})

// 6. 拦截音频播放
regHook('weappUi', 'Upload.filePreview.showAudio.overwrite', (options) => {
  console.log('音频预览参数', options)
  const { url, otherParams, isMobile } = options;
  isMobile ? MAudio.showAudio(url, otherParams) : Audio.showAudio(url, otherParams);
})

// 7. 拦截其他预览行为
regHook('weappUi', 'Upload.filePreview.otherFilePreiver.overwrite', (options) => {
  console.log('预览参数', options)
  const { url } = options;
  weappUtils.openLink(url);
})
```

### 下载相关

```javascript
// 1. 拦截下载方法
regHook('weappUi', 'Upload.download.overwrite', (options) => {
  console.log('下载方法参数', options)
  const { url, fileId, loginFree, module, params } = options;
  // 自定义下载方法
  // ...
})

// 2. 修改下载类型
regHook('weappUi', 'Upload.downloadType.overwrite', (options) => {
  console.log('下载类型相关参数', options)
  // open，href，request
  return 'href';
})
```

## jsCompressImgOptions

```json
{
  extensions?: string[];// 压缩图片格式 png jpeg
  fileTypes?: string[];//压缩图片类型 image/jpeg, image/png, image/webp
  minSize?: number;//文件大于多少才进行压缩
  usePlugin?:"browser-image-compression"|"Compressor";//压缩插件
  //https://www.npmjs.com/package/browser-image-compression
  //https://www.npmjs.com/package/compressorjs

}
```
