react-core-image-upload：轻量级的图片上传裁剪组件

react-core-image-upload

https://github.com/Vanthink-UED/react-core-image-upload/blob/master/README-ZH.md?utm_source=tuicool&utm_medium=referral

一款轻量级的图片上传裁剪组件

English Doc

快速开始

使用 npm

npm install react-core-image-upload --save

使用 yarn

yarn add react-core-image-upload

使用ES6 进行开发

import React from 'react'; import ReactCoreImageUpload from 'react-core-image-upload'; let App = React.createClass({ //... render() { return( <div> <ReactCoreImageUpload text="Upload Your Image" class={['pure-button', 'pure-button-primary', 'js-btn-crop']} inputOfFile="files" url="./api/upload.php" imageUploaded={this.handleRes}> </ReactCoreImageUpload> </div> ); }, handleRes(res) { this.setState({ // handle response }) } })

运行DEMO

yarn run start

http://localhost:9000/webpack-dev-server/demo/index.html

Demo Online

配置属性

Props Type Example Description url String '/crop.php' 服务端上传的地址 text String 'Upload Image' 你需要显示按钮的文本 inputOfFile String 'file' 上传服务端对应表单 name extensions String 'png,jpg,gif' 限制的图片类型 crop Boolean true 是否需要裁剪 cropRatio String '1:1' 限制裁剪的形状 cropBtn Object {ok:'Save','cancel':'Give Up'} 按钮文本 maxFileSize Number 10485760(10M) 文件大小限制 maxWidth Number 150 限制裁剪图片的最大宽度 maxheight Number 150 限制裁剪图片的最大高度 inputAccept string 'image/*' / 'image/jpg,image/jpeg,image/png' 赋予上传file的接受类型 isXhr Boolean true 是否需要调用系统内自己的上传功能 headers Object {auth: xxxxx} 设置xhr上传 的header

image uploading callback

imageUploaded : 当图片上传成功后的响应处理imageChanged : 当选择图片后imageUploading 图片上传过程中errorHandle 图片上传中的异常处理

Demo

Demo Source

发给服务端的裁剪参数

If you crop a image , your crop will send a request to your server with some crop arguments;

参数如上图。

如果你需要自定义裁剪弹窗的的样式，你可以自己写css进行覆盖

MIT Liscense