Awesome
Vue-Core-Image-Upload
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.
<img width="360" src="./shots/vue-core-image-upload.png" />Install
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
<table class="m-table bordered"> <thead> <tr> <th>Props</th> <th align="left">Data Type</th> <th>Example</th> <th>Details</th> </tr> </thead> <tbody> <tr> <td>url</td> <td align="left">String</td> <td>'/crop.php'</td> <td>Your server api</td> </tr> <tr> <td>text</td> <td align="left">String</td> <td>'Upload Image'</td> <td>The text of your uploading button</td> </tr> <tr> <td>inputOfFile</td> <td align="left">String </td> <td> 'file'</td> <td>Yout input[file] name</td> </tr> <tr> <td>extensions</td> <td align="left">String</td> <td>'png,jpg,gif'</td> <td>Limit the image type</td> </tr> <tr> <td>crop</td> <td align="left">Boolean</td> <td>'server'</td> <td>Crop image option</td> </tr> <tr> <td>cropRatio</td> <td align="left">String</td> <td>'1:1'</td> <td>The cropped image shape</td> </tr> <tr> <td>cropBtn</td> <td align="left">Object</td> <td>{ok:'Save','cancel':'Give Up'}</td> <td>The Text of cropping button text</td> </tr> <tr> <td>maxFileSize</td> <td align="left">Number</td> <td>10485760(10M)</td> <td>Limit the size of the file</td> </tr> <tr> <td>maxFileSize</td> <td align="left">Number</td> <td>10485760(10M)</td> <td>Limit the size of the file</td> </tr> <tr> <td>multipleSize</td> <td align="left">Number</td> <td>5</td> <td>Limit the count of the file</td> </tr> <tr> <td>maxWidth</td> <td align="left">Number</td> <td>150</td> <td>The maximum width of cropped image </td> </tr> <tr> <td>maxheight</td> <td align="left">Number</td> <td>150</td> <td>ιεΆεΎηηζ倧ι«εΊ¦</td> </tr> <tr> <td>inputAccept</td> <td align="left">string</td> <td>'image/*' / 'image/jpg,image/jpeg,image/png'</td> <td>the input[file] accept</td> </tr> <tr> <td>compress</td> <td align="left">Number</td> <td>50</td> <td>Set the quality of compressed image</td> </tr> <tr> <td>isXhr</td> <td align="left">Boolean</td> <td>true</td> <td>IF cancel ajax uploading</td> </tr> <tr> <td>headers</td> <td align="left">Object</td> <td>{auth: xxxxx}</td> <td>Set customed header when ajax uploading</td> </tr> <tr> <td>data</td> <td align="left">Object</td> <td>{auth: xxxxx}</td> <td>Set customed data when ajax posting server</td> </tr> </tbody> </table>Contributions
Your contributions and suggestions are welcome ππππππ.