在不久前，我们把vue-core-image-upload 发布了2.0 。这次我们保持了完整的api迁移到了react上。支持了header 定义，支持了 file change 的自定义事件，更新了更加详细的文档。

react-core-image-upload 项目地址

Demo

快速开始

使用 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

npm  run start

http://localhost:9000/demo/index.html

Demo Online

配置属性

image uploading callback

• imageUploaded: 当图片上传成功后的响应处理

• imageChanged: 当选择图片后

• imageUploading 图片上传过程中

• errorHandle图片上传中的异常处理

Demo

Demo 代码

发给服务端的裁剪参数

你使用裁剪的话，会向服务端发送上面的参数如上图。

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