npm package: @shihuo/upload-component
Description: 基于fusion Upload组件，实现统一的上传配置入口
Latest version: 5.2.3

# 统一上传组件

@shihuo/upload-component

基于 fusion Upload 组件，实现统一的上传配置入口，支持所有用法，特殊用法和说明你请看下方 API 和实际使用用例

@alifd/next 版本: ^1.19.8

## API

| 参数名                  | 说明                 | 必填 | 类型                   | 默认值      | 备注                                                         |
| ----------------------- | -------------------- | ---- | ---------------------- | ----------- | ------------------------------------------------------------ |
| validate                | 校验模式             |      | boolean                | false       | 开启后自定校验字段生效。<br />默认情况下用法等同fusion的Upload组件<br /><br />v4.0.0版本后进行调整，设置validate属性开启图片上传校验能力。 |
| shape                   | 上传按钮形状         |      | enum                   |             | 在fusion的upload组件的shape配置基础上新增`integrate`，展示整合组件模式<br />v2.0.4 |
| preventMessage          | 阻止内置提示框弹出   |      | boolean                | false       |                                                              |
| volume                  | 文件大小限制         |      | number                 | 2           | 文件大小最大限制，可输入浮点数<br />单位：M                  |
| ratio                   | 宽高比               |      | string/number/Array    | 1:1         | 预设 1:1、3:4选项<br />支持传入字符串格式 "数字:数字"<br />如：10:7 表示宽/高必须10/7<br />支持传入数字：值表示宽/高<br />支持传入数组：其中一种宽高比通过即校验通过 |
| widthRange              | 宽度范围             |      | number/string/Array    | [600, 2500] | null表示不限宽<br />number以及字符串数字表示固定宽度         |
| heightRange             | 高度范围             |      | number/string/Array    | [600, 2500] | 同withRange                                                  |
| beforeUploadVolumeError |                      |      | function               |             | beforeUpload阶段【文件大小】校验不通过触发<br />反参：<br />{errorMessage}, file, reader, options |
| beforeUploadRatioError  |                      |      | function               |             | beforeUpload阶段【比例】校验不通过触发<br />反参：<br />{errorMessage}, file, reader, options |
| beforeUploadSizeError   |                      |      | function               |             | beforeUpload阶段【尺寸】校验不通过触发<br />反参：<br />{errorMessage}, file, reader, options |
| onValidateError         | 整体校验错误回调     |      | function: () => object |             | 反参：<br /> {<br /> volume: boolean  【false大小校验不通过】<br />  volumeError: 错误信息<br />  ratio: boolean【false宽高比校验不通过】<br />  ratioError<br />  size: boolean 【false尺寸校验不通过】<br />  sizeError<br />}<br /> file：文件对象<br /> reader：FileReader<br /> options：beforeUpload透传的options |
| blockCheck              | 阻断校验             |      | boolean                | false       | 设置true情况：校验不通过时立即停止继续执行。<br />执行对应beforeUpload错误回调函<br />数。并执行onValidateError回调 |
| dataURLToFile           | base64转换成file对象 |      | function               |             | v1.1.2                                                       |
| Validator               | 校验器               |      | class                  |             | 校验器入参volume、ratio、widthRange、heightRange             |
| onOpenTool              | 打开素材库回调       |      |                        |             | 传入时显示打开素材库按钮<br />仅shape=`integrate`或Upload.Integrate生效<br />v2.0.0 |
| appKey                  | 上传的token          | 是   | string                 |             | 联系上传服务负责人开通<br /><br />v4.0.0                     |
| forceAppKey             | 上传的token          |      | string                 |             | 强制设置appKey，不受环境因素影响。<br />与appKey区别在于：appKey只在正式环境生效，测试环境依然传递默认appKey。<br /><br />v5.1.0 |

注意：组件内部预定义了上传配置，覆盖action后内置上传配置失效，同时内置formatter配置失效。



##### Upload.dataURLToFile

base64转换成file对象

入参：base64字符串，文件名称，自定义mime

```javascript
const file = Upload.dataURLToFile('data:image;xxxxx', '文件名', 'mime');
```

##### v1.1.2+



##### Upload.Validator

校验器

入参： volume、ratio、widthRange、heightRange

```javascript
const validator = new Validator({ volume: 2, ratio: 1, widthRange: [600, 2500], heightRange: [600, 2500] });
// 单独校验文件大小
// @params total 文件大小
// @return object: 
// volume: boolean 是否校验通过，true通过，false不通过。
// volumeError: string 错误信息
const volumeResult = validator.validateVolume(total);
// 单独校验宽高比例
// @params width
// @params height
// @return object: 
// ratio: boolean 是否校验通过，true通过，false不通过。
// ratioError: string 错误信息
const ratioResult = validator.validateVolume(width, height);
// 单独校验宽高范围
// @params width
// @params height
// @return object: 
// size: boolean 是否校验通过，true通过，false不通过。
// sizeError: string 错误信息
const sizeResult = validator.validateRange(width, height);

// 综合校验
// @params width 宽
// @params height 高
// @params total 大小
// @return object:
// volume: boolean 是否校验通过，true通过，false不通过。
// volumeError: string 错误信息
// ratio: boolean 是否校验通过，true通过，false不通过。
// ratioError: string 错误信息
// size: boolean 是否校验通过，true通过，false不通过。
// sizeError: string 错误信息
// errorMessage: 总的错误信息
const error = validator.exec({ width, height, total });

```

##### v1.1.2+



##### Upload.ACTION

v4.0.0后失效



##### Upload.NAME

v4.0.0后失效



##### Upload.ACCEPT

##### Upload.WITH_CREDENTIALS

v4.0.0后失效



##### Upload.VOLUME

##### Upload.WIDTH_RANGE

##### Upload.HEIGHT_RANGE

##### Upload.RATIO



##### v3.1.0+

##### Upload.isBlob

```javascript
// 判断url是否blob
Upload.isBlob('blob:https://**********/**********'); // true | false
```



##### Upload.isBase64

```javascript
// 判断url是否base64
Upload.isBase64('xxxxxx'); // true | false
```



##### Upload.isLink

```javascript
// 判断url是否http[s]链接
Upload.isLink('https://xxxxxx'); // true | false
```



##### Upload.getFileSuffix

```javascript
// 获取url上的文件后缀 默认jpeg(支持link, blob://, base64图片链接)
Upload.getFileSuffix('https://xxxx/xxxx.png'); // png
```



##### Upload.toDataURL

```javascript
// 转base64 (支持跨域图片)
Upload.toDataURL('https://xxxx/xxxx.png');
```



##### Upload.urlToFile

```javascript
// url转file (支持跨域图片)
Upload.urlToFile('https://xxxx/xxxx.png');
```



##### Upload.generateFileResponse



##### v4.0.0+

##### Upload.getEnv

```javascript
// 获取本地环境
Upload.getEnv(); // tst | prd
```



##### Upload.getToken

```javascript
// 通过appKey获取上传token
Upload.getToken(appKey);

// return
// env 当前环境
// type 服务商类型 2:七牛
// token 服务商上传的token
// objectKey 图片相对路径（不包含域名部分）
// domain 图片域名（完整图片url domain + objectKey）
```



##### Upload.upload