这里我封装的是组件,如有需要可以复制并引入即可。实现思路主要借助图片剪辑插件 ” vue-cropper “ 实现对上传图片的样式调整,使用步骤如下:
1.下载
npm i vue-cropper
github地址:https://github.com/xyxiao001/vue-cropper
2.引入
import { VueCropper } from "vue-cropper";
3.使用
components: {
VueCropper
}
大家可以根据自己的需求进行更该,大致思路注释有介绍
完整代码如下:
<template>
<div>
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
<el-row>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<vue-cropper
ref="cropper"