vue-cropper 使用记录

3,948 阅读1分钟

记录一次使用vue-cropper使用经历

安装

npm install vue-cropper

使用 (main.js引用)

import VueCropper from 'vue-cropper'

Vue.use(VueCropper)

页面内部(页面样式个人需求而定)

图片上传(使用el-upload上传,其中 action不设置上传路径,on-change后把本地的上传路径赋值给 vue-cropper组件的 option.img 用于在组件内部显示上传的图片)

根据vue-cropper内置方法把处理截图如: 放大/缩小,旋转截图等操作方法

预览处理(获取截图的base64数据,在本地显示)

最后上传处理

关于vue-cropper 组件内部一些属性配置(根据自己需要进行设置对应的值)

初次使用更具体的一些东西也需要慢慢摸索,本篇是记录一次使用经历,不喜勿喷,请多包涵,结尾附上 vue-cropper github地址 : github.com/xyxiao001/v…