当前位置: 首页 > news >正文

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

react-core-image-upload.jpg

在不久前,我们把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 代码

发给服务端的裁剪参数

vuedb14210fae1cd6855f2438276654eaf55.png

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

如果你需要自定义裁剪弹窗的的样式,你可以自己写css进行覆盖

相关文章:

  • 我的决心书
  • C# 类型转换
  • MonkeyRunner简介
  • 百度编辑器取消高度自动拉长
  • View的layout机制
  • 免费 cdn
  • 利用js和JQuery定义一个导航条菜单
  • storm1.0节点间消息传递过久分析及调优
  • java api 调用es集群(1.7版本)
  • SQL Server 中WITH (NOLOCK)浅析
  • shiro权限认证与授权
  • 时间处理的一些代码片段
  • 自动化-----saltstack基础技术
  • 排序算法(java版)
  • 初学ArcGIS API for JavaScript
  • 【编码】-360实习笔试编程题(二)-2016.03.29
  • 【干货分享】SpringCloud微服务架构分布式组件如何共享session对象
  • 【跃迁之路】【477天】刻意练习系列236(2018.05.28)
  • DOM的那些事
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • Java 最常见的 200+ 面试题:面试必备
  • JAVA多线程机制解析-volatilesynchronized
  • Making An Indicator With Pure CSS
  • Redis学习笔记 - pipline(流水线、管道)
  • SQLServer插入数据
  • TypeScript迭代器
  • windows下使用nginx调试简介
  • 蓝海存储开关机注意事项总结
  • 如何合理的规划jvm性能调优
  • 如何借助 NoSQL 提高 JPA 应用性能
  • 如何优雅的使用vue+Dcloud(Hbuild)开发混合app
  • 深入浅出webpack学习(1)--核心概念
  • 运行时添加log4j2的appender
  • elasticsearch-head插件安装
  • #vue3 实现前端下载excel文件模板功能
  • #每天一道面试题# 什么是MySQL的回表查询
  • (32位汇编 五)mov/add/sub/and/or/xor/not
  • (Java实习生)每日10道面试题打卡——JavaWeb篇
  • (Java数据结构)ArrayList
  • (转) RFS+AutoItLibrary测试web对话框
  • (转)Sql Server 保留几位小数的两种做法
  • (转)关于多人操作数据的处理策略
  • (转)清华学霸演讲稿:永远不要说你已经尽力了
  • .NET 6 在已知拓扑路径的情况下使用 Dijkstra,A*算法搜索最短路径
  • .NET 8 中引入新的 IHostedLifecycleService 接口 实现定时任务
  • .net core 微服务_.NET Core 3.0中用 Code-First 方式创建 gRPC 服务与客户端
  • .NET MVC 验证码
  • .Net Remoting常用部署结构
  • .NetCore实践篇:分布式监控Zipkin持久化之殇
  • .NET版Word处理控件Aspose.words功能演示:在ASP.NET MVC中创建MS Word编辑器
  • .NET导入Excel数据
  • .Net转Java自学之路—SpringMVC框架篇六(异常处理)
  • :如何用SQL脚本保存存储过程返回的结果集
  • @DateTimeFormat 和 @JsonFormat 注解详解
  • @Query中countQuery的介绍