antd的联级选择器异步调用编辑回显_react-uplod-img 是一个基于 React antd组件的图片上传组件...

react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 图片精确的尺寸限制 排序等功能

需要 react 版本大于 v16.1.0 支持async await

安装

npm i react-uplod-img --save

使用

引入

import UpImage from 'react-uplod-img'

调用

const getOSSSign = (suffix,width,height, extraParam) => {

const apiServerUrl = 'https://hp.bncry.cn/util/getAliyunSignature';

const url = `${apiServerUrl}?${[

`bizName=${extraParam.bizName}`,

`suffix=${suffix}`,

`width=${width}`,

`height=${height}`,

].join('&')}`;

return new Promise((resolve,reject)=>{

fetch(url).then(async (response)=>{

const res = await response.json();

const formData = res.data;

resolve({

key: formData.dirPath,

policy: formData.policy,

OSSAccessKeyId: formData.OSSAccessKeyId,

success_action_status: '200',

callback: formData.callback,

signature: formData.signature,

});

})

})

};

const ossUploadConfig = {

type:'oss',

imageUploadServerHost: 'https://hp-file-lf.oss-cn-hangzhou.aliyuncs.com', //图片上传服务地址

imageShowServiceHost: 'https://hp-file-lf.oss-cn-hangzhou.aliyuncs.com', // 图片查看地址前缀

totalNum: 5,

supportSort: true,

value:'avatar/2018-10-10/f2b3ace0-cc33-11e8-8ad4-3550e70cc242_220_138.jpg;avatar/2018-10-10/f2b42210-cc33-11e8-8ad4-3550e70cc242_1080_1920.jpg;avatar/2018-10-10/f2b44920-cc33-11e8-8ad4-3550e70cc242_1280_719.jpg'

};

配置项

类型

默认值

描述

type

String

oss

类型 目前支持 oss qiniu

imageUploadServerHost

String

图片上传服务地址前缀

imageShowServiceHost

String

图片查看服务地址前缀

maxSize

Number

2048

图片大小限制 单位KB

totalNum

Number

1

图片数量限制

minWidth

Number

图片最小宽度限制

maxWidth

Number

图片最大宽度限制

minHeight

Number

图片最小高度限制

maxHeight

Number

图片最大高度限制

supportSort

Bool

false

是否支持拖拽排序

extraParam

Object

获取签名getSign方法 的第四个参数 供获取签名时 自定义入参

getSign

Func

(suffix,width,height, extraPara)=>{}

获取签名的方法 Promise

onChange

Func

(values)=>{}

图片上传成功时的回调 参数为图片的半路径;分隔的一个字符串

value

String

回显图片的路径 半路径 ;分隔

getSign

suffix 图片后缀 width 图片宽度 height 图片高度 extraParam 自定义的参数

width 和 height 参数是组件通过渲染获取的图片真实宽高, 推荐传递到服务器端参与签名 生成的URL key中能携带宽高信息 如 /avatar/2018-10-10/f2b3ace0-cc33-11e8-8ad4-3550e70cc242_800_600.jpg 图片路径中携带了宽高信息 后期前端页面图片懒加载时 可以通过链接中的宽高信息做优化

// oss

const getSign = (suffix,width,height, extraParam) => {

const apiServerUrl = 'https://hp.bncry.cn/util/getAliyunSignature';

const url = `${apiServerUrl}?${[

`bizName=${extraParam.bizName}`,

`suffix=${suffix}`,

`width=${width}`,

`height=${height}`,

].join('&')}`;

return new Promise((resolve,reject)=>{

fetch(url).then(async (response)=>{

const res = await response.json();

const formData = res.data;

resolve({

key: formData.dirPath,

policy: formData.policy,

OSSAccessKeyId: formData.OSSAccessKeyId,

success_action_status: '200',

callback: formData.callback,

signature: formData.signature,

});

})

})

};

// qiniu

const getSign = (suffix,width,height, extraParam) => {

const qiniuApiServerUrl = 'https://hp.bncry.cn/util/getQiniuSignature';

const url = `${qiniuApiServerUrl}?${[

`suffix=${suffix}`,

`width=${width}`,

`height=${height}`,

].join('&')}`;

return new Promise((resolve,reject)=>{

fetch(url).then(async (response)=>{

const formData = await response.json();

resolve({

token: formData.uptoken,

});

})

})

};

注意事项

获取签名采用的是async await的异步处理方式 需要你的项目支持async await 如果不支持 会报 ReferenceError: regeneratorRuntime is not defined

解决方案

npm i --save-dev babel-plugin-transform-runtime

在 .babelrc 文件中添加：

"plugins": [[

"transform-runtime",

{

"helpers": false,

"polyfill": false,

"regenerator": true,

"moduleName": "babel-runtime"

}

]]