场景
前后端分离的项目,前端修改头像时,需要对头像进行裁剪并且能实时预览,然后上传到SpringBoot后台。
实现效果如下
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
插件官网
https://github.com/xyxiao001/vue-cropper
安装插件
npm install vue-cropper
引用插件
组件内使用
import { VueCropper } from 'vue-cropper'
components: {
VueCropper,
},
main.js里面使用
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
cdn方式使用
<script src="//cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.js"></script>
Vue.use(window['vue-cropper'].default)
nuxt