• 分片文件上传

    版本&更新说明

    1.2.0

    01. 说明

    注意, 使用改组件需要安装hzero-front-hfile@1.2,hzero-front@1.2及以上版本

    通过导出组件可以分片上传文件到服务器

    点击上传文件后, 将会打开分片上传模态框开始上传文件

    02. API

    参数 说明 类型 默认值 必输
    type 上传类型, 对象存储上传或服务器上传 ‘bucket’|‘server’
    bucketName 桶名, 对象存储上传时需要 string BKT_PUBLIC
    directory 文件夹, 对象存储上传时需要 string
    storageCode 存储编码, 对象存储上传时需要 string
    configCode 配置编码, 服务器上传时需要 string
    path 路径, 服务器上传时需要 string
    componentType 组件类型, 使用 hzero-ui 或 c7n 组件 ‘hzero’|‘c7n’
    modalProps 模态框属性
    title 模态框标题 string
    disabled 是否禁用 boolean
    style iframe样式 React.CSSProperties
    organizationId 租户id, 不传默认为当前租户 number getCurrentOrganizationId()

    03. 使用示例

    import { Col, Form } from 'hzero-ui';
    
    import FileChunkUploader from 'components/FileChunkUploader';
    
    import { MODAL_FORM_ITEM_LAYOUT } from 'utils/constants';
    
    @Form.create({ fieldNameProp: null })
    export default class Demo extends React.Component {
    
      // snips...
      /**
       * 服务器上传
       * 租户 和 服务器上传配置编码 为空时 不能上传文件
       */
      renderEcsUpload() {
        const { form, isTenant, organizationId } = this.props;
        const { uploadKey } = this.state;
        const configCode = form.getFieldValue('configCode');
        const path = form.getFieldValue('path');
        let currentTenantId = organizationId;
        if (!isTenant) {
          currentTenantId = form.getFieldValue('tenantId');
        }
        const uploadDisabled = !configCode || (!isTenant && isNil(currentTenantId));
        return (
          <Col>
            <Form.Item
              {...MODAL_FORM_ITEM_LAYOUT}
              label={intl.get('hfile.fileAggregate.view.button.upload').d('文件上传')}
            >
              <FileChunkUploader
                key={uploadKey}
                type="server"
                componentType="hzero"
                title={intl.get('hfile.fileAggregate.view.button.upload').d('文件上传')}
                configCode={configCode}
                path={path}
                disabled={uploadDisabled}
              />
            </Form.Item>
          </Col>
        );
      }
    
      // snips...
    }