• 上传组件


    说明

    上传组件可以满足业务场景中需要上传各种文件的情况,有两种上传组件,可以根据不同的需求来进行使用。

    名词解释

    (1)attachmentUUID

    一般的上传场景中,每条数据关联一个上传文件,在需要每条数据关联多个上传文件时,就需要用到attachmentUUID来进行关联,存储时只需要存储attachmentUUID即可。

    在使用之前,可以通过请求 http://dev.hzero.org:8180/hfle/v1/files/uuid 接口获取。

    (2)bucketName

    bucketName是桶名,不同的桶对上传文件在类型、大小、数量等属性的限制不同,所以在使用上传组件前要确定使用的桶名。

    01、关联UUID的上传组件

    1、说明

    此组件生成一个弹出框,并且通过获取attachmentUUID,从而使得上传的图片和存储到后台的数据之间以attachmentUUID关联(一般在行内编辑需要上传多个文件时候使用)。

    2、API

    参数 说明 类型 默认值 必输
    attachmentUUID 传入的UUID,如果不传入,组件可生成 string ''
    hasTemplate 是否有附件模板 boolean false
    fileType 上传类型(不推荐使用,推荐使用accept) string ''
    accept 上传类型 string ''
    description 附件模板描述 string ''
    btnText 上传按钮文字 string 查看附件|上传附件
    icon 上传按钮图标 string <Icon type=“upload” />
    templateAttachmentUUID 附件模版UUID string ''
    title 上传弹出框标题 string ‘附件’
    viewOnly 是否只读 boolean false
    bucketName 上传桶名 string ‘spfm-comp’
    removeCallback 删除回调 function
    afterOpenUploadModal 展开modal后触发的方法 function
    uploadSuccess 上传成功回调 function

    3、使用示例

    // 引入组件
    import UploadModal from 'components/Upload/index';
    // 组件使用
    <UploadModal
        bucketName="xxx-bucket"
        attachmentUUID={attachmentUuid}
        afterOpenUploadModal={this.afterOpenUploadModal}
        uploadSuccess={this.uploadSuccess}
        removeCallback={this.removeCallback}
        filesNumber={filesNumber}
    />
    

    4、图片示例

    02、不关联UUID的上传按钮组件

    1、说明

    此组件生成一个上传按钮,点击按钮后可以上传文件。

    2、API

    参数 说明 类型 默认值 必输
    disabled 上传按钮禁用 boolean false
    fileType 上传类型 string ''
    viewOnly 是否只读 boolean false
    text 上传按钮文字 string ‘上传’
    single 是否只上传单个文件 boolean false
    listType 上传列表显示样式 string ‘picture’
    fileSize 文件大小 number 10 * 1024 * 1024
    bucketName 上传桶名 string ''
    fileList 上传的文件列表 array []
    onUploadSuccess 上传成功后回调 function
    onUploadError 上传失败回调 function
    onRemoveSuccess 删除成功回调 function
    uploadData 上传方法 function
    onRemove 删除文件时事件 function

    3、使用示例

    // 引入组件
    import Upload from 'components/Upload/UploadButton';
    // 组件使用
    <Upload
        fileType="image/jpeg;image/png"
        viewOnly
        single
        bucketName="xxx-bucket"
        fileList={fileList}
        onUploadSuccess={this.onUploadSuccess}
        onRemoveSuccess={this.onRemoveSuccess}
        text='上传附件'
    />
    

    4、图片示例