微客导航 » 文章资讯 » vue+element实现图片上传及裁剪功能

vue+element实现图片上传及裁剪功能

2023-07-22 09:23:10 150

本文实例为大家分享了vue+element实现图片上传及裁剪的具体代码，供大家参考，具体内容如下

随便写的一个小demo功能是没有任何问题可能里面会有一些小细节没有优化

1、安装vue-cropper

npminstallvue-cropper

2、组件内使用

import{VueCropper}from'vue-cropper'
components:{
VueCropper,
},

具体可见官网

demo




.avatar-uploader{
background:red!important;
width:150px;height:150px;
text-align:center;
line-height:150px;
}
.el-icon-plus{
width:150px;height:150px;font-size:30px;
}
.cropper-content{
width:500px;height:500px;background:pink;
}
.cropper{
width:500px;
height:500px;
background:yellow;
}

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue+element实现图片上传及裁剪功能

图片上传

热门推荐

随机推荐