<template> <div class="components-container"> <aside> This is based on <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>. {{ $t('components.imageUploadTips') }} </aside> <pan-thumb :image="image" /> <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true"> Change Avatar </el-button> <image-cropper v-show="imagecropperShow" :key="imagecropperKey" :width="300" :height="300" url="https://httpbin.org/post" lang-type="en" @close="close" @crop-upload-success="cropSuccess" /> </div> </template> <script> import ImageCropper from '@/components/ImageCropper'; import PanThumb from '@/components/PanThumb'; export default { name: 'AvatarUploadDemo', components: { ImageCropper, PanThumb }, data() { return { imagecropperShow: false, imagecropperKey: 0, image: 'https://eclectickoifish.files.wordpress.com/2015/01/7826_one_piece.jpg', }; }, methods: { cropSuccess(resData) { this.imagecropperShow = false; this.imagecropperKey = this.imagecropperKey + 1; this.image = resData.files.avatar; }, close() { this.imagecropperShow = false; }, }, }; </script> <style scoped> .avatar{ width: 200px; height: 200px; border-radius: 50%; } </style>