分享一个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"
}
]]
分享一个react 图片上传组件 支持OSS 七牛云的更多相关文章
- 基于Node的React图片上传组件实现
写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...
- Jquery图片上传组件,支持多文件上传
Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...
- H5拍照、选择图片上传组件核心
背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
- vue图片上传组件
前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload), ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- 图片上传,支持同步/异步、预览(MVC、uploadify异步提交、js预览、ajaxSubmit异步提交)兼容大部分浏览器,含代码
图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...
- 图片上传组件webuploader
前端组件webuploader 当时也是搞了很久参考这种demo,但是没记.现在事后大致总结下.直接上大概代码(我使用asp.net MVC来做的): 执行顺序:(get)Record/Add——A ...
随机推荐
- tar包压缩时相对路径问题
一.问题描述 现在有一个需求,不知道该如何才能实现压缩: tar -czvf /home/futong/test/logs.tar.gz /home/futong/test/logs 打开压缩包发现 ...
- 『现学现忘』Docker相关概念 — 2、云计算的服务模式
目录 1.最底层的,就是IaaS 2.再往上,就是PaaS 3.继续往上,就是SaaS 4.IaaS.SaaS.PaaS三者之间的关系 上一篇文章详细介绍了什么是云计算: 云是一种服务,可以像使用水. ...
- 2W字长文吐血整理 Docker&云原生
Docker 和 云原生 一.概念介绍 1.1 Docker Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Win ...
- Sublime Text 3 build 3103 注册码
分享几个ST3的注册码,第一个我注册到自己电脑上,亲测可用,剩余几个没有测试.→原文链接 -– BEGIN LICENSE -–Michael BarnesSingle User LicenseEA7 ...
- MATLAB菜鸟入门笔记【编程习惯】
1.编程标记模板 % Script file:temp_conversion.m % % Purepose: % To convert an input temperature from d ...
- Java有了synchronized,为什么还要提供Lock
摘要:在Java中提供了synchronized关键字来保证只有一个线程能够访问同步代码块.既然已经提供了synchronized关键字,那为何在Java的SDK包中,还会提供Lock接口呢? 本文分 ...
- VuePress 博客之 SEO 优化(二)重定向
前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...
- python学习之scipy实战1(积分用法)
import numpy as np def main(): #1-- Integral积分 from scipy.integrate import quad, dblquad, nquad prin ...
- 阿里云ECS服务器(G5)安装配置docker
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 前言 服务器配置:阿里云ECS服务器(G5服务器3年2核8G内存80G云盘),安装的是CentOS,内核信息:5.10.60-9.al8.x86_ ...
- SQL注入工具sqlmap的使用
sqlmap使用 测试注入点 sqlmap -u "URL" 爆数据库 sqlmap -u "URL" --dbs 查看当前库 sqlmap -u " ...