react-coree-inge-uploadライト級の写真をアップロードしてプラグインを裁断します.

少し前に、私達はvue-coree-mage-uploadを2.0リリースしました.今回は完全なappiを持ってreactに移行しました.header定義をサポートし、file changeのカスタムイベントをサポートし、より詳細な文書を更新しました.
react-coree-inge-uploadプロジェクトアドレス
モモ
クイックスタート
npmを使う

npm install react-core-image-upload --save

yarnを使う

yarn add react-core-image-upload

ES 6を使って開発します.

import React from 'react';
import ReactCoreImageUpload  from 'react-core-image-upload';
let App = React.createClass({ 
//...

  render() {
    return(
      

        
        
      
    );
  },
  
  handleRes(res) {
    this.setState({
      // handle response
    })
  }
})

デモを実行

npm  run start

http://localhost:9000/demo/index.html
Demo Online
属性の設定
Props
Type
Example
Description
url
String
'/crop.php'
サービスアップロードの住所
テキスト
String
'Upload Image'
ボタンを表示するテキストが必要です.
inputOf File
String
‘file’
サーバー対応フォームnameをアップロードします.
extens
String
'png,jpg,gif'
制限された画像の種類
crop
ボロア
true
裁断する必要がありますか
cropRatio
String
'1:1'
シェイプの制限
cropBtn
Object
{ok:'Save'、'cancel':'Give Up''
ボタンテキスト
maxFileSize
Number
1085760(10 M)
ファイルサイズ制限
maxWidth
Number
150
切り取り画像の最大幅を制限します.
maxheight
Number
150
トリミング画像の最大高さを制限します.
input Accept
ストリングス
「イメージ/*」/「イメージ/jpg、イメージ/jpeg、イメージ/png」
アップロードファイルの受け入れタイプを付与します.
isXhr
ボロア
true
システム内の自分のアップロード機能を呼び出す必要がありますか?
headers
Object
{auth:xxxxx}
xhrアップロードのheaderを設定します.
イメージアップロードading calback

imageUploaded:画像アップロード成功後の応答処理

imageChanged:画像を選択すると

imageUploadingピクチャアップロード中

errorHandleピクチャアップロード中の異常処理

モモ
デモコード
サーバーに送る裁断パラメータ
裁断を使うと、上のパラメータが上の図のようにサーバーに送信されます.
もしあなたが自分で自分のデザインを裁断する必要があるなら、cssを書いてカバーしてもいいです.