https://github.com/vanthink-ued/react-core-image-upload
a component for image to upload and crop
https://github.com/vanthink-ued/react-core-image-upload
Last synced: 6 months ago
JSON representation
a component for image to upload and crop
- Host: GitHub
- URL: https://github.com/vanthink-ued/react-core-image-upload
- Owner: Vanthink-UED
- License: mit
- Created: 2016-10-10T07:57:27.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T21:23:11.000Z (over 2 years ago)
- Last Synced: 2024-12-14T16:02:02.127Z (6 months ago)
- Language: JavaScript
- Homepage: http://vanthink-ued.github.io/react-core-image-upload/index.html
- Size: 2.42 MB
- Stars: 80
- Watchers: 8
- Forks: 23
- Open Issues: 32
-
Metadata Files:
- Readme: README-ZH.md
- License: LICENSE
Awesome Lists containing this project
README
# react-core-image-upload
[]()
[](https://travis-ci.org/Vanthink-UED/react-core-image-upload)
一款轻量级的图片上传裁剪组件
[English Doc]('./README.md')
### 快速开始
使用 npm
```bash
npm install react-core-image-upload --save
```
使用 yarn
``` bash
yarn add react-core-image-upload
```
### 使用ES6 进行开发
``` js
import React from 'react';
import ReactCoreImageUpload from 'react-core-image-upload';
let App = React.createClass({
//...
render() {
return(
);
},
handleRes(res) {
this.setState({
// handle response
})
}
})
```
### 运行DEMO
``` bash
yarn run start
```
[http://localhost:9000/webpack-dev-server/demo/index.html](http://localhost:9000/webpack-dev-server/demo/index.html)
[Demo Online](http://vanthink-ued.github.io/react-core-image-upload/upload.html)
### 配置属性
| 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](http://vanthink-ued.github.io/react-core-image-upload/upload.html)
[Demo Source](https://github.com/Vanthink-UED/react-core-image-upload/blob/master/src/components/contents.js)
### 发给服务端的裁剪参数
If you crop a image , your crop will send a request to your server with some crop arguments;
参数如上图。
如果你需要自定义裁剪弹窗的的样式，你可以自己写css进行覆盖
### MIT Liscense