Vue 上传图片前 裁剪图片

一. 使用的技术

vue-cropper

文档：vue-cropper | A simple picture clipping plugin for vue

二. 安装

npm install vue-cropper  或  yarn add vue-cropper

三. 引入

在使用页面中引用

import { VueCropper } from 'vue-cropper';

四. 使用

配置项： 

五. 小结

这个可以结合element 上传组件使用 在上传图片选择之后 拿到文件的url地址, base64, blob 赋值给vue-cropper. 弹出截图组件，截取完之后可以拿到图片的数据。然后在赋值给上传组件。