react-core-image-upload 一款轻量级图片上传裁剪插件

《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

设置属性

PropsTypeExampleDescription
urlString‘/crop.php’服务端上传的地点
textString‘Upload Image’你须要显现按钮的文本
inputOfFileString‘file’上传服务端对应表单 name
extensionsString‘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 代码

发给服务端的裁剪参数

《react-core-image-upload 一款轻量级图片上传裁剪插件》

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

假如你须要自定义裁剪弹窗的的款式,你能够本身写css举行掩盖

    原文作者:静逸秋水
    原文地址: https://segmentfault.com/a/1190000008617923
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞