a-upload 裁剪

以下是a-upload裁剪的实现方法：

1. 在beforeUpload函数中，先校验上传的文件是否为图片，然后校验大小，最后将图片转换为base64格式。

2. 在nextTick下一帧中调用Cropper将图片文件imageRef传入，进行裁剪。

3. 使用Promise禁止antd组件的自动上传，点击上传时，先判断浏览器是否支持Canvas.toBlob方法，如果不支持，则使用封装的方法进行上传；如果支持，则调用getCroppedCanvas().toBlob方法将裁剪后的图片转换为blob格式完成上传。

具体实现代码如下：

<template>
  <div>
    <a-upload
      :beforeUpload="beforeUpload"
      :customRequest="customRequest"
    >
      <a-button>
        <a-icon type="upload" /> Click to Upload
      </a-button>
    </a-upload>
  </div>
</template>

<script>
import Cropper from 'cropperjs'

export default {
  data() {
    return {
      cropper: null,
      imageRef: null
    }
  },
  methods: {
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          const img = new Image()
          img.src = reader.result
          img.onload = () => {
            if (img.width < 300 || img.height < 300) {
              reject(new Error('图片尺寸太小'))
            } else if (file.size / 1024 / 1024 > 2) {
              reject(new Error('图片大小不能超过2MB'))
            } else {
              this.imageRef = img
              resolve()
            }
          }
        }
      })
    },
    customRequest() {
      return new Promise((resolve, reject) => {
        if (!HTMLCanvasElement.prototype.toBlob) {
          // 浏览器不支持toBlob方法
          const dataURL = this.cropper.getCroppedCanvas().toDataURL()
          const blob = this.dataURLtoBlob(dataURL)
          this.upload(blob, resolve, reject)
        } else {
          // 浏览器支持toBlob方法
          this.cropper.getCroppedCanvas().toBlob(blob => {
            this.upload(blob, resolve, reject)
          })
        }
      })
    },
    upload(blob, resolve, reject) {
      const formData = new FormData()
      formData.append('file', blob)
      // 发送ajax请求上传文件
      // ...
    },
    dataURLtoBlob(dataURL) {
      const arr = dataURL.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.cropper = new Cropper(this.imageRef, {
        aspectRatio: 1,
        viewMode: 1
      })
    })
  }
}
</script>