效果图:
全部代码:
npm install vue-cropper //首先 安装vue-cropper
main.js全局引用:
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
// 挂载全局
Vue.prototype.$http = httpRequest // ajax请求方法 更具自己需求来
更多参考链接:https://blog.csdn.net/weixin_39327044/article/details/89765109
<!-- 弹出层-裁剪 -->
<el-dialog
title="上传图片"
:visible.sync="dialogVisible"
:before-close="handleClose"
width="700px"
top
center>
<div>
<el-row>
<el-button class="el-icon-upload" type="primary" style="padding: 13px 50px;"> 点击上传</el-button>
<input
type="file"
id="uploads"
accept="image/png, image/jpeg, image/gif, image/jpg"
@change="uploadImg($event,1)"
class="el-button"
style="margin-left: -162px;display: inline-block;width: 173px;margin-bottom: 15px;opacity: 0;">
</el-row>
<el-row>
<!-- <el-col :span="16"> -->
<el-col :span="24">
<!-- 裁剪 -->
<vueCropper
style="width:100%;height:300px"
ref="cropper"
:img="attach.customaryUrl"
:autoCrop="options.autoCrop"
:fixedBox="options.fixedBox"
:canMoveBox="options.canMoveBox"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:centerBox="options.centerBox"
@realTime="realTime"
>
</vueCropper>
</el-col>
<el-col :span="24">
<h2 align="center">头像预览</h2>
<div class="show-preview">
<div :style="previews.div" class="preview">
<img style="width:100%" :src="previews.url" :style="previews.img">
</div>
</div>
</el-col>
</el-row>
<el-row class="footerBtn" align="center">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="cut('blob')">确认</el-button>
</el-row>
</div>
</el-dialog>
</div>