分享一个react 图片上传组件 支持OSS 七牛云
时间:2020-04-22
本文章向大家介绍分享一个react 图片上传组件 支持OSS 七牛云,主要包括分享一个react 图片上传组件 支持OSS 七牛云使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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'
};
<UpImage getSign={getOSSSign} {...ossUploadConfig} extraParam={{bizName:"avatar"}}/>
配置项 | 类型 | 默认值 | 描述 |
---|---|---|---|
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 |
回显图片的路径 半路径 ;分隔 |
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"
}
]]
原文地址:https://www.cnblogs.com/10manongit/p/12753626.html
- struts2: config-browser-plugin 与 convention-plugin 学习
- 千万级规模高性能、高并发的网络架构经验分享
- UE4新手之编程指南
- redis 学习笔记(5)-Spring与Jedis的集成
- Linq to SQL 查询Tips
- SQLite 预写式日志
- java调用.net asmx / wcf
- mybatis3.2.8 与 hibernate4.3.6 混用
- mybatis的物理分页:mybatis-paginator
- 使用 WMI 进行诊断WCF
- java:快速文件分割及合并
- 暴涨210倍的一个数字货币正悄无声息崛起
- QT Creator 快速入门教程 读书笔记(一)
- .NET程序优化(GCServer )
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MapReduce之 FileInputFormat的切片策略(默认)
- MapReduce之片和块的关系
- MapReduce的常见输入格式之CombineTextInputFormat
- MapReduce之Job提交流程
- MapReduce之自定义InputFormat
- MapReduce之MapTask工作机制
- 数据链路层的三个基本问题
- DEBUG ArrayList
- 【PAT甲级】1002 A+B for Polynomials (25分)
- c/c++补完计划(一): 指针常量和常量指针
- 从0到1开发测试平台(六)增加登录接口
- FFmpeg 开发(04):FFmpeg + OpenGLES 实现音频可视化播放
- 【剑指offer】31.整数中1出现的次数
- 【剑指offer】35.数组中的逆序对
- 针对用友ic读卡器 web 脚本的重构