脚本宝典收集整理的这篇文章主要介绍了

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

配置属性

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' alt="react-core-image-upload 一款轻量级图片上传裁剪插件" title="react-core-image-upload 一款轻量级图片上传裁剪插件" 赋予上传file的接受类型
isXhr Boolean true 是否需要调用系统内自己的上传功能
headers Object {auth: xxxxx} 设置xhr上传 的header

image uploading callback

  • imageUploaded: 当图片上传成功后的响应处理

  • imageChanged: 当选择图片后

  • imageUploading 图片上传过程中

  • errorHandle图片上传中的异常处理

Demo

Demo 代码

发给服务端的裁剪参数

vuedb14210fae1cd6855f2438276654eaf55.png

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

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

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过