天天看点

图片裁剪上传 react图片裁剪上传 react

图片裁剪上传 react

这个裁剪功能是我从网上下载的裁剪插件,但是功能不完全,我自己补充成比较好用的一款。

代码下载地址:https://github.com/yawenzou/crop-image

用法

  1. 安装crop插件
    npm install –save react-cropper
  2. 将这整个文件夹引入项目
    图片裁剪上传 react图片裁剪上传 react
  3. 使用方法
import CropBlock from './crop/cropBlock.jsx';

<CropBlock 
    number = {} 
    url = '/manage/manager/upload.do' 
    uploadData = {{"type": 'item'}} 
    urlArr = {[]} 
    getAllImg = {this.getAllImg}
/>
           

参数说明

参数 描述(都不是必传的)
number 最多上传的图片,默认无上限
aspectRatio 裁剪比例,如1/1是正方形,默认不限制
url 图片上传的服务器后台接口名称
uploadData 图片上传的服务器后台接口另外的参数
urlArr 数组格式,初始化时默认已经上传的图片路径
getAllImg 回调函数,接受的是所有裁剪的图片路径地址

继续阅读