@shihuo/upload-component NPM

统一上传组件

@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）