<template>
  <div>
    <Row>
      <i-col span="12">
        <Card>
          <div class="cropper-example cropper-first">
            <cropper
              :src="exampleImageSrc"
              crop-button-text="确认提交"
              @on-crop="handleCroped"
            ></cropper>
          </div>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import Cropper from '@/components/cropper'
import { uploadImg } from '@/api/data'
export default {
  name: 'cropper_page',
  components: {
    Cropper
  },
  data () {
    return {
      exampleImageSrc: ''
    }
  },
  methods: {
    handleCroped (blob) {
      const formData = new FormData()
      formData.append('croppedImg', blob)
      uploadImg(formData).then(() => {
        this.$Message.success('Upload success~')
      })
    }
  }
}
</script>

<style lang="less">
.cropper-example{
  height: 400px;
}
</style>