vue-core-image-upload

vue-core-image-upload 介绍

vue-Core-image-Upload 一款vue轻量级的图片裁剪插件,支持 IE 10+。可设置裁剪比例和缩放。上传支持批量操作和图片压缩。

使用 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

})

}

})

配置属性

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'

赋予上传file的接受类型

isXhr

Boolean

true

是否需要调用系统内自己的上传功能

headers

Object

{auth: xxxxx}

设置xhr上传的header

image uploading callback

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

imageChanged: 当选择图片后

imageUploading 图片上传过程中

errorHandle图片上传中的异常处理

网站地址:http://vanthink-ued.github.io/vue-core-image-upload/index.html

GitHub:https://github.com/Vanthink-UED/vue-core-image-upload

网站描述:图片剪切和上传的 vue 插件

官方网站：http://vanthink-ued.github.io/vue-core-image-upload/index.html

小编说

以上是编程之家为你收集整理的vue-core-image-upload全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。

vue-core-image-upload