统一上传组件

@shihuo/upload-component

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

@alifd/next 版本: ^1.19.8

API

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

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

Upload.dataURLToFile

base64转换成file对象

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

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

v1.1.2+

Upload.Validator

校验器

入参： volume、ratio、widthRange、heightRange

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

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

Upload.isBase64

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

Upload.isLink

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

Upload.getFileSuffix

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

Upload.toDataURL

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

Upload.urlToFile

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

Upload.generateFileResponse

v4.0.0+

Upload.getEnv

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

Upload.getToken

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

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

Upload.upload