npm install element-ui --save

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

<template>
  <el-upload :action="uploadUrl" :headers="headers" :on-success="handleUploadSuccess">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your-upload-url',
      headers: {
        Authorization: 'your-auth-token'
      }
    }
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      console.log(response)
      // 在这里可以进行上传成功后的操作
    }
  }
}
</script>

npm install vue-cropperjs --save

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imageUrl"
      :guides="true"
      :view-mode="1"
      drag-mode="move"
      :auto-crop-area="0.6"
      :crop-box-resizable="false"
      :crop="cropOptions"
    ></vue-cropper>
    <el-button @click="crop" size="small" type="primary">点击剪裁</el-button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs'

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      imageUrl: '',
      cropOptions: {
        aspectRatio: 1,
        autoCropArea: 0.6,
        movable: false,
        cropBoxResizable: false
      }
    }
  },
  methods: {
    crop() {
      const cropper = this.$refs.cropper
      const canvas = cropper.getCroppedCanvas()
      const croppedImageUrl = canvas.toDataURL('image/jpeg')
      // 在这里可以进行剪裁后的操作
      console.log(croppedImageUrl)
    }
  }
}
</script>