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.

Step 1: Install

npm i vue-core-image-upload --save

Step 2: Use

Code Example (ES6)

  :class="['btn', 'btn-primary']"
  url="your server url" >

import VueCoreImageUpload  from 'vue-core-image-upload';

new Vue({
  el: '#app',
  components: {
    'vue-core-image-upload': VueCoreImageUpload
  data: {
    src: '',
  methods: {
     imageuploaded(res) {
      if (res.errcode == 0) {
        this.src = '';


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


Below are the reference links:

No. Link
1. Read more here.
2. Follow code author here.