React開源：一款輕量級的圖片上傳裁剪組件

react-core-image-upload

一款輕量級的圖片上傳裁剪組件

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
    })
  }
})</code></pre> 
  
運行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