摘要:是一个基于组件的图片上传组件支持等服务端自定义获取签名批量上传预览删除排序等功能需要版本大于支持地址安装引入调用图片上传服务地址图片查看地址前缀配置项类型默认值描述类型目前
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" };
配置项 | 类型 | 默认值 | 描述 |
---|---|---|---|
type | String | oss | 类型 目前支持 oss qiniu |
imageUploadServerHost | String | 图片上传服务地址前缀 | |
imageShowServiceHost | String | 图片查看服务地址前缀 | |
maxSize | Number | 2048 | 图片大小限制 单位KB |
totalNum | Number | 1 | 图片数量限制 |
supportSort | Bool | false | 是否支持拖拽排序 |
extraParam | Object | 获取签名getSign方法 的第四个参数 供获取签名时 自定义入参 | |
getSign | Func | (suffix,width,height, extraPara)=>{} | 获取签名的方法 Promise |
onChange | Func | (values)=>{} | 图片上传成功时的回调 参数为图片的半路径;分隔的一个字符串 |
value | String | 回显图片的路径 半路径 ;分隔 |
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" } ]]
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/98268.html
摘要:接下来讲解一下博客中用的图床阿里云对象存储,简称,虽然目前大家用的比较多的是七牛云之类的,但是因为我个人原因我还是选择了阿里云,后面我会简单说明下原因。 showImg(https://segmentfault.com/img/remote/1460000008838754?w=960&h=300); 前言 之前打算写一篇有关个人博客SEO优化的体验和一些自身体会,但是发现自己还没完全...
摘要:接下来讲解一下博客中用的图床阿里云对象存储,简称,虽然目前大家用的比较多的是七牛云之类的,但是因为我个人原因我还是选择了阿里云,后面我会简单说明下原因。 showImg(https://segmentfault.com/img/remote/1460000008838754?w=960&h=300); 前言 之前打算写一篇有关个人博客SEO优化的体验和一些自身体会,但是发现自己还没完全...
阅读 3352·2023-04-26 00:39
阅读 3869·2021-09-22 10:02
阅读 2457·2021-08-09 13:46
阅读 1062·2019-08-29 18:40
阅读 1417·2019-08-29 18:33
阅读 721·2019-08-29 17:14
阅读 1474·2019-08-29 12:40
阅读 2919·2019-08-28 18:07