微信小程序学院_vue+element完成图片上传及裁剪功

vue+element实现图片上传及裁剪功能       这篇文章主要为大家详细介绍了vue+element实现图片上传及裁剪功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

1 、安装 vue-cropper

npm install vue-cropper

2、组件内使用

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

具体可见

demo

 template 
 div 
 h1 图片上传 /h1 
 div 
 el-upload
 action="posts/"
 :show-file-list="false"
 :ess="ess"
 :before-upload="beforeAvatarUpload"
 img v-if="imageUrl" :src="imageUrl" 
 i v-else /i 
 /el-upload 
 /div 
 el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body 
 div 
 div 
 vueCropper
 ref="cropper"
 :img="option.img"
 :outputSize="option.outputSize"
 :outputType="option.outputType"
 :info=""
 :canScale="option.canScale"
 :autoCrop="option.autoCrop"
 :autoCropWidth="option.autoCropWidth"
 :autoCropHeight="option.autoCropHeight"
 :fixed="option.fixed"
 :fixedBox="option.fixedBox"
 :fixedNumber="option.fixedNumber"
 /vueCropper 
 /div 
 /div 
 div slot="footer" 
 el-button @click="dialogVisible = false" 取 消 /el-button 
 el-button type="primary" @click="finish" :loading="loading" 确认 /el-button 
 /div 
 /el-dialog 
 /div 
 /template 
 script 
import {VueCropper} from 'vue-cropper'
export default {
 components: {
 VueCropper
 data(){
 return{
 imageUrl: '',
 dialogVisible: false,
 // 裁剪组件的基础配置option
 option: {
 img: '', // 裁剪图片的地址
 info: true, // 裁剪框的大小信息
 outputSize: 0.8, // 裁剪生成图片的质量
 outputType: 'jpeg', // 裁剪生成图片的格式
 canScale: false, // 图片是否允许滚轮缩放
 autoCrop: true, // 是否默认生成截图框
 autoCropWidth: 100, // 默认生成截图框宽度
 autoCropHeight: 100, // 默认生成截图框高度
 fixedBox: true, // 固定截图框大小 不允许改变
 fixed: true, // 是否开启截图框宽高固定比例
 fixedNumber: [1, 1], // 截图框的宽高比例
 full: true, // 是否输出原图比例的截图
 canMoveBox: false, // 截图框能否拖动
 original: false, // 上传图片按照原始比例渲染
 centerBox: false, // 截图框是否被限制在图片里面
 infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
 canMove:true,
 picsList: [], //页面显示的数组
 // 防止重复提交
 loading: false,
 :{}
 methods: {
 ess(res, file,fileList) {
 //上传成功后将图片地址赋值给裁剪框显示图片
 this.$nextTick(() = {
 this.option.img = URL.createObjectURL(file.raw);
  = res
 this.dialogVisible = true
 beforeAvatarUpload(file) {
 const isJPG = file.type === 'image/jpeg'||file.type==='image/png';
 const isLt2M = file.size / 1024 / 1024 
 if (!isJPG) {
 this.$message.error('上传头像图片只能是 JPG 格式!');
 if (!isLt2M) {
 this.$message.error('上传头像图片大小不能超过 2MB!');
 return isJPG isLt2M;
 finish() {
 this.$refs.cropper.getCropBlob((data) = {
 var fileName = 'goods' + .uid
 this.loading = true
 //上传阿里云服务器
 //请求
 /script 
 style scoped 
 .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;
 /style 

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

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