Ant Design Vue结合vue-cropper打造图片裁剪上传组件，成功入职字节跳动

全局引用

import VueCropper from ‘vue-cropper’

Vue.use(VueCropper)

直接使用

import { VueCropper } from ‘vue-cropper’

export default {

name: ‘CropperModal’,

components: {

VueCropper,

},

data() {

return {

}

},

}

• 创建组件文件夹

• 上传按钮组件 index.vue

<a-upload

name=“avatar”

listType=“picture-card”

:showUploadList=“false”

:beforeUpload=“beforeUpload”

:customRequest=“function () {}”

@change=“handleChange”

上传图片

<cropper-modal

ref=“CropperModal”

:imgType=“imgType”

@cropper-no=“handleCropperClose”

@cropper-ok=“handleCropperSuccess”

• 模态框 CropperModal.vue

<a-modal

:visible=“visible”

:title=“options.title”

:maskClosable=“false”

:confirmLoading=“confirmLoading”

:width=“800”

@cancel=“cancelHandel”

<vue-cropper

ref=“cropper”

:img=“options.img”

:info=“true”

:autoCrop=“options.autoCrop”

:autoCropWidth=“options.autoCropWidth”

:autoCropHeight=“options.autoCropHeight”

:fixedBox=“options.fixedBox”

@realTime=“realTime”

<a-button key=“back” @click=“cancelHandel”>取消

<a-button key=“submit” type=“primary” :loading=“confirmLoading” @click=“okHandel”>保存