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

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

git地址

demo

安装

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'};<UpImage getSign={getOSSSign}  {...ossUploadConfig} extraParam={{bizName:"avatar"}}/>

getSign

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

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

    // ossconst 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,});})})};// qiniuconst 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"}]]