• 分片文件上传

    版本&更新说明

    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...
}