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