react-qiniu-avatar-upload
A beautiful react component for avatar crop and upload. (react头像剪裁上传组件).
Notice: This component is designed for pc, not recommended for use on the mobile side.(该组件适用于pc端,不推荐手机端使用)
借鉴
更新日志
@1.0.4
- 改为箭头函数,函数调用不需要再bind(this)
@1.0.0
- 可以读取本地图片并进行剪辑,上传到七牛
示例
点我.
截图
配置环境
react
安装
npm
$ npm install react-qiniu-avatar-upload
使用
Props
名称 | 类型 | 默认 | 说明 |
---|---|---|---|
qiniuTokenUrl | String | *必填 | 获取七牛token的地址 |
qiniuTokenMethod | String | 'GET' | 获取七牛token的method |
qiniuUploadPutExtra | Object | {fname: ""} | 七牛上传putExtra |
qiniuUploadConfig | Object | {region: qiniu.region.z2} | 七牛上传config |
width | Number | 200 | 最终得到的图片宽度 |
height | Number | 200 | 最终得到的图片高度 |
imgFormat | string | 'png' | jpg/png, 最终得到的图片格式 |
imgBgc | string | '#fff' | 导出图片背景色,当imgFormat属性为jpg时生效 |
noCircle | Boolean | false | 关闭 圆形图像预览 |
noSquare | Boolean | false | 关闭 方形图像预览 |
noRotate | Boolean | true | 关闭 旋转图像功能 |
withCredentials | Boolean | false | 支持跨域 |
ki | Number | 0 | 原名key,类似于id,触发事件会带上(如果一个页面多个图片上传控件,可以做区分 |
Methods
名称 | 说明 |
---|---|
handleCropUploadSuccess | 上传成功, 参数( res, ki ) |
handleCropUploadFail | 上传失败, 参数( err, ki ) |
使用示例
;;;; state = visible: false imgUrl: "" ; { this; } { this; } { console; console; } { console; this; this; } { console; } { return <div className="App"> <header className="App-header"> <img src=logo className="App-logo" alt="logo" /> <button className="set-upload-btn" onClick=thishandleClick > 设置上传 </button> thisstatevisible && <ReactQiniuAvatarUpload qiniuTokenUrl="/api/v1/public/getQiniuToken" off=thisoff upload=thisupload handleCropUploadSuccess=thishandleCropUploadSuccess handleCropUploadFail=thishandleCropUploadFail /> thisstateimgUrl && <img style=marginTop: '10px' src=thisstateimgUrl alt="七牛上传图片" /> </header> </div> ; } ;
后端设置
https://developer.qiniu.com/kodo/sdk/1289/nodejs
返回格式
Koa为例
async { // https://portal.qiniu.com/user/key const accessKey = accessKey; const secretKey = secretKey; const mac = accessKey secretKey; const options = scope: bucket ; const putPolicy = options; const token = putPolicy; ctxbody = token }