vue-image-crop-compress-upload
a vue plgin for image upload , crop and compress(vue图片剪裁压缩上传插件).
** Notice: ** This component is designed for pc, not recommended for use on the mobile side.(该组件适用于pc端,不推荐手机端使用)
Brower compatibility
IE10+
Install
npm
$ npm install vue-image-crop-compress-upload
Usage
Props
名称 | 类型 | 默认 | 说明 |
---|---|---|---|
field | String | 'upload' | Upload input filename, used for server side get the file stream. |
value | Boolean | twoWay | show or not |
url | String | '' | Server api path,like "/avatar/upload" |
params | Object | null | POST Params,like "{k:v}" |
headers | Object | null | POST request header,like "{k:v}" |
langType | String | 'zh' | language type |
langExt | Object | language extend | |
width | Number | 200 | width of receive image |
height | Number | 200 | height of receive image |
imgFormat | string | 'jpg' | jpg/png, Server api receive file type. |
Events
名称 | 说明 |
---|---|
cropSuccess | image crop success, params( imageDataUrl, field ) |
cropUploadSuccess | upload success, params( jsonData, field ) |
cropUploadFail | upload fail, params( status, field ) |
Example vue
<!-- Add "scoped" attribute to limit CSS to this component only -->