vue-cropper + ant-design-vue 实现裁剪图片并上传到服务器

需求：

上传的图片要进行裁切或压缩到C端显示的格式与大小

主要应用于PC端的后管 涉及到新增过程 与图片回显（修改）

思路：

1. 点击上传，从本地选择图片文件
2. 选择文件夹后进入模态框（将选择的图片塞入模态框） 模态框作为裁剪图片的容器
3. 进行裁剪
4. 获取裁剪后的结果 并将裁剪后的图片对象返回给父组件
5. 父组件获取到裁剪后的图片文件 进行上传 成功后将图片回显

修改过程：

1. 将后端数据回显到图片框内
2. 点击图片 重复上述1-5步 成功后覆盖掉当前页面图片

开发：

图片上传框组件：

效果：

裁剪模态框

 

效果：

需要用到一些图片转base64格式，base64转File对象等utils方法，可自行百度 主要取决于后端接收哪样的数据格式。

 

感谢大大们的优秀UI和强大组件，提供一下参考文档：

ant-design-vue 参考文档

vue-cropper 参考文档