a vue plugin for image upload and crop ( Support π± IE10+)
if you use vue.js(<=2.0), you should go here.Or select 1.x.x version.
npm i vue-core-image-upload --save
Code Example (ES6)
<vue-core-image-upload :class="['btn', 'btn-primary']" :crop="false" @imageuploaded="imageuploaded" :data="data" :max-file-size="5242880" url="your server url" > </vue-core-image-upload>
import VueCoreImageUpload from 'vue-core-image-upload'; new Vue({ el: '#app', components: { 'vue-core-image-upload': VueCoreImageUpload }, data: { src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png', }, methods: { imageuploaded(res) { if (res.errcode == 0) { this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png'; } } } });
NUXT
import Vue from 'vue'; import VueCoreImageUpload from 'vue-core-image-upload/dist/ssr'; Vue.use( VueCoreImageUpload ); plugins: [ { src: '~plugins/vue-core-image-upload.js', ssr: false } ]
| Props | Data Type | Example | Details |
|---|---|---|---|
| url | String | '/crop.php' | Your server api |
| text | String | 'Upload Image' | The text of your uploading button |
| inputOfFile | String | 'file' | Yout input[file] name |
| extensions | String | 'png,jpg,gif' | Limit the image type |
| crop | Boolean | 'server' | Crop image option |
| cropRatio | String | '1:1' | The cropped image shape |
| cropBtn | Object | {ok:'Save','cancel':'Give Up'} | The Text of cropping button text |
| maxFileSize | Number | 10485760(10M) | Limit the size of the file |
| maxFileSize | Number | 10485760(10M) | Limit the size of the file |
| multipleSize | Number | 5 | Limit the count of the file |
| maxWidth | Number | 150 | The maximum width of cropped image |
| maxheight | Number | 150 | ιεΆεΎηηζ倧ι«εΊ¦ |
| inputAccept | string | 'image/*' / 'image/jpg,image/jpeg,image/png' | the input[file] accept |
| compress | Number | 50 | Set the quality of compressed image |
| isXhr | Boolean | true | IF cancel ajax uploading |
| headers | Object | {auth: xxxxx} | Set customed header when ajax uploading |
| data | Object | {auth: xxxxx} | Set customed data when ajax posting server |
Your contributions and suggestions are welcome ππππππ.