@aliretail/react-materials-components
Version:
142 lines (134 loc) • 7.61 kB
Markdown
---
title: OssUploader-API
order: 3
category: UI
description: OssUploader 组件描述
screenshot: https://gw.alicdn.com/imgextra/i2/O1CN01yW3hCD1M8CnqeKFlq_!!6000000001389-2-tps-90-90.png
---
OssUploader，内置了获取签名以及上传接口，在零售云 oms 业务中通用。
## API
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
|--------------------|-------------------|------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-----------------------------------------------------------------------------------------------------------------------------|
| value | 值 | Y | Item \| Item[] | [] \| {} | 若limit不为1，则value为数组，若onlyUrl为true，则value每一项为string |
| bizType | 业务类型 | Y | 'articleMaterial' \| 'frontImage' \| 'brandLogo' \| 'buyerProof' \| 'sellerProof' \| 'counselorProof' \| 'merchantProof' \| 'idcardImage' \| 'itemImage' \| 'itemVideo' \| 'snapshot' \| 'itemDescription' \| 'CRDI' | | bizType 需要和 uploadType、uploadScene 保持对应关系，其关系可见下面的说明（在搭建场景下可以自动生成，源码场景需要手动指定） |
| uploadType | 上传文件类型 | N | 'image' \| 'video' \| 'xls' \| 'all' | 'image' | |
| uploadScene | bizName | N | 'item' \| 'category' \| 'store' \| 'reverse' \| 'trade' \| 'crm' \| 'CRDI' | 'item' | |
| uploadHint | 上传提示信息 | N | React.ReactElement | null | |
| onlyUrl | 只使用 url | N | boolean | true | 若开启，则 value 为 string 或 string[]，否则为 Item 或 Item[] |
| getOssSignatureUrl | 自定义获取签名url | N | string | | 需确保接口出入参一致 |
| uploadCallbackUrl | oss回调url | N | string | | 需确保接口出入参一致 |
| onInit | 组件初始化回调 | N | () => void | | |
| onChange | 值变化回调 | N | (Item \| Item[]) => void | | 入参与value格式一致 |
其他参数会透传给 Fusion 的 Upload 组件，请移步[文档](https://fusion.alibaba-inc.com/pc/component/basic/upload)。
### 类型介绍
```ts
interface ItemObject {
/**
* 缩略图
*
thumbUrl: string;
/**
* 下载链接
*
downloadURL: string;
/**
* 文件名
*
name: string;
/**
* 文件尺寸
*
size?: number;
/**
* 文件长度，在视频类型时有意义
*
duration?: number;
thumbnail?: string;
}
type Item = ItemObject | string;
```
### 说明
bizType 与 uploadType、uploadScene的对应关系如下。
其中，xls代表excel文件，image代表图片，video代表视频，all代表全部类型
```ts
[
{
uploadScene: 'crm',
bizType: 'articleMaterial',
title: 'CRM图文素材图片',
uploadType: 'xls'
},
{
uploadScene: 'category',
bizType: 'frontImage',
title: '前台类目上传小图标',
uploadType: 'image'
},
{
uploadScene: 'category',
bizType: 'brandLogo',
title: '品牌logo',
uploadType: 'image'
},
{
uploadScene: 'reverse',
bizType: 'buyerProof',
title: 'C端上传举证图片',
uploadType: 'image'
},
{
uploadScene: 'reverse',
bizType: 'sellerProof',
title: 'B端上传举证图片',
uploadType: 'image'
},
{
uploadScene: 'reverse',
bizType: 'counselorProof',
title: '智慧营养顾问上传举证图片',
uploadType: 'image'
},
{
uploadScene: 'reverse',
bizType: 'merchantProof',
title: '商家端上传举证图片',
uploadType: 'image'
},
{
uploadScene: 'store',
bizType: 'idcardImage',
title: '新增店铺负责人身份证上传',
uploadType: 'image'
},
{
uploadScene: 'item',
bizType: 'itemImage',
title: '商品发布上传图片',
uploadType: 'image'
},
{
uploadScene: 'item',
bizType: 'itemVideo',
title: '商品发布上传视频',
uploadType: 'video'
},
{
uploadScene: 'trade',
bizType: 'snapshot',
title: '交易快照',
uploadType: 'all'
},
{
uploadScene: 'item',
bizType: 'itemDescription',
title: '商品发布上传文描',
uploadType: 'all'
},
{
uploadScene: 'CRDI',
bizType: 'CRDI',
title: '数据平台UDF',
uploadType: 'all'
},
]
```