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='https://jsonplaceholder.typicode.com/posts/':show-file-list='false':on-success='handleAvatarSuccess':before-upload='beforeAvatarUpload' > <img v-if='imageUrl' :src='https://www.haobala.com/bcjs/imageUrl' class='avatar'> <i v-else class='el-icon-plus avatar-uploader-icon'></i> </el-upload> </div> <el-dialog :visible.sync='dialogVisible' append-to-body> <div class='cropper-content'><div 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 { 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, fileinfo:{} } }, methods: { handleAvatarSuccess(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.uidthis.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组件的教程，请大家点击专题vue.js组件学习教程进行学习。

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