<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>
