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: '
}
}
Preview:
Changelog:
v3.0.3 (04/16/2022)
- Supports Vue 3
Download Details:
Author: dai-siki
Live Demo: https://dai-siki.github.io/vue-image-crop-upload/example-2/demo.html
Download Link: https://github.com/dai-siki/vue-image-crop-upload/archive/master.zip
Official Website: https://github.com/dai-siki/vue-image-crop-upload
Install & Download:
$ npm install vue-image-crop-upload