上传组件

说明

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

名词解释

（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='上传附件'
/>