πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A cross-browser and cross-platform vue plugin for image crop and upload.

Image

Documentation

Vue-Core-Image-Upload

npm

a vue plugin for image upload and crop ( Support πŸ“± IE10+)

ζŸ₯ηœ‹ζ–‡ζ‘£

English Document

if you use vue.js(<=2.0), you should go here.Or select 1.x.x version.

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 } ]

Demo

Props

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

Contributions

Your contributions and suggestions are welcome πŸ˜„πŸ˜„πŸ˜„πŸ’πŸ’πŸ’.


You May Also Like