vue+element实现图片上传及裁剪功能
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要为大家详细介绍了vue+element实现图片上传及裁剪功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+element实现图片上传及裁剪的具体代码,供大家参考,具体内容如下
随便写的一个小demo 功能是没有任何问题 可能里面会有一些小细节没有优化
1 、安装 vue-cropper
npm install vue-cropper
2、组件内使用
import { VueCropper } from 'vue-cropper' ponents: { VueCropper, },
具体可见
demo
<template> <div> <h1>图片上传</h1> <div> <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode./posts/" :show-file-list="false" :on-suess="handleAvatarSuess" :before-upload="beforeAvatarUpload" > <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body> <div class="cropper-content"> <div class="cropper" style="text-align:center"> <vueCropper ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.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" class="dialog-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 { ponents: { 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, fileinfo:{} } }, methods: { handleAvatarSuess(res, file,fileList) { //上传成功后将图片地址赋值给裁剪框显示图片 this.$nextTick(() => { this.option.img = URL.createObjectURL(file.raw); this.fileinfo = res this.dialogVisible = true }) }, beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg'||file.type==='image/png'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; }, finish() { this.$refs.cropper.getCropBlob((data) => { var fileName = 'goods' + this.fileinfo.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组件的教程,请大家点击专题进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:vue+animation实现翻页动画
下一篇:vue实现匀速轮播效果
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程