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

来源：互联网发布：旅游本质知乎编辑：程序博客网时间：2024/05/19 06:47

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

配置属性

PropsTypeExampleDescriptionurlString'/crop.php'服务端上传的地址textString'Upload Image'你需要显示按钮的文本inputOfFileString'file'上传服务端对应表单 nameextensionsString'png,jpg,gif'限制的图片类型cropBooleantrue是否需要裁剪cropRatioString'1:1'限制裁剪的形状cropBtnObject{ok:'Save','cancel':'Give Up'}按钮文本maxFileSizeNumber10485760(10M)文件大小限制maxWidthNumber150限制裁剪图片的最大宽度maxheightNumber150限制裁剪图片的最大高度inputAcceptstring'image/*' / 'image/jpg,image/jpeg,image/png'赋予上传file的接受类型isXhrBooleantrue是否需要调用系统内自己的上传功能headersObject{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

0 0