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 插件
vue-core-image-upload官方网站
官方网站： http://vanthink-ued.github.io/vue-core-image-upload/index.html
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。
查看更多关于vue-core-image-upload的详细内容...