Vue Component For Image Crop & Upload

Install & Download:

$ npm install vue-image-crop-upload

Description:

A well-designed Vue component for image crop and upload. Compatible with Vue 3 and Vue 2.

How to use it:

1. Import and register the component.

import Vue from 'vue';
import myUpload from 'vue-image-crop-upload';

new Vue({
  // ...
  components: {
    'my-upload': myUpload
  },
  // ...
});

2. Add the upload component to the app.

<div id="app">
  <a class="btn" @click="toggleShow">Set Avatar</a>
  <my-upload field="img"
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
        v-model="show"
    :width="250"
    :height="250"
    url="/upload"
    :params="params"
    :headers="headers"
    img-format="png"></my-upload>
  <img :src="imgDataUrl">
</div>

new Vue({
  el: '#app',
  data: {
    show: true,
    params: {
      token: '12321',
      name: 'avatar'
    },
    headers: {
      smail: '*_~'
    },
    imgDataUrl: ''
  },
  components: {
    'my-upload': myUpload
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
          /**
     * crop success
     *
     * [param] imgDataUrl
     * [param] field
     */
    cropSuccess(imgDataUrl, field){
      console.log('-------- crop success --------');
      this.imgDataUrl = imgDataUrl;
    },
    /**
     * upload success
     *
     * [param] jsonData  server api return data, already json encode
     * [param] field
     */
    cropUploadSuccess(jsonData, field){
      console.log('-------- upload success --------');
      console.log(jsonData);
      console.log('field: ' + field);
    },
    /**
     * upload fail
     *
     * [param] status    server api return error status, like 500
     * [param] field
     */
    cropUploadFail(status, field){
      console.log('-------- upload fail --------');
      console.log(status);
      console.log('field: ' + field);
    }
  }
});

3. All available component props.

// field name
field: {
  type: String,
  'default': 'avatar'
},
// unique key
ki: {
  type: String,
  'default': '0'
},
// shows the component
modelValue: {
  type: Boolean,
  'default': true
},
// upload url
url: {
  type: String,
  'default': ''
},
// more object parameters
params: {
  type: Object,
  'default': ()=>null
},
// add custom headers
headers: {
  type: Object,
  'default': ()=>null
},
// width
width: {
  type: Number,
  default: 200
},
// height
height: {
  type: Number,
  default: 200
},
// disable rotate
noRotate: {
  type: Boolean,
  default: true
},
// disable circle image
noCircle: {
  type: Boolean,
  default: false
},
// disable square image
noSquare: {
  type: Boolean,
  default: false
},
// max size
maxSize: {
  type: Number,
  'default': 10240
},
// language
langType: {
  type: String,
  'default': 'zh'
},
// language package
langExt: {
  type: Object,
  'default': ()=>null
},
// image format
imgFormat: {
  type: String,
  'default': 'png'
},
// image background
imgBgc: {
  type: String,
  'default': '#fff'
},
// allows cross domain
withCredentials: {
  type: Boolean,
  'default': false
},
// upload method
method: {
  type: String,
  'default': 'POST'
},
// initial image url
initialImgUrl: {
  type: String,
  'default': ''
},
// allowed image format
allowImgFormat: {
  type: Array,
  'default': ()=>[
    'gif',
    'jpg',
    'png'
  ]
}

4. Add your own languages.

{
    hint: 'Click or drag the file here to upload',
    loading: 'Uploading…',
    noSupported: 'Browser is not supported, please use IE10+ or other browsers',
    success: 'Upload success',
    fail: 'Upload failed',
    preview: 'Preview',
    btn: {
    	off: 'Cancel',
    	close: 'Close',
    	back: 'Back',
    	save: 'Save'
    },
    error: {
    	onlyImg: 'Image only',
    	outOfSize: 'Image exceeds size limit: ',
    	lowestPx: 'Image\'s size is too low. Expected at least: '
    }
}