react-core-image-upload 一款輕量級圖片上傳裁剪插件

在不久前，咱們把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

配置屬性

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 代碼

發給服務端的裁剪參數

你使用裁剪的話，會向服務端發送上面的參數如上圖。

若是你須要自定義裁剪彈窗的的樣式，你能夠本身寫css進行覆蓋