在不久前,我们把vue-core-image-upload 宣布了2.0 。此次我们坚持了完全的api迁徙到了react上。支撑了header 定义,支撑了 file change 的自定义事宜,更新了越发细致的文档。
疾速最先
运用 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
设置属性
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
图片上传中的非常处置惩罚
发给服务端的裁剪参数
你运用裁剪的话,会向服务端发送上面的参数如上图。
假如你须要自定义裁剪弹窗的的款式,你能够本身写css举行掩盖