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 --saveCode 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 ππππππ.