vue-cropper插件实现图片截取上传组件封装
更新时间:2021年5月28日 10:00 点击:1813
基于vue-cropper插件实现图片截取上传组件封装的具体代码,供大家参考,具体内容如下
需求场景:
后台开发需要上传图片并进行相应比例尺寸图片的截取,本组件开发采用Ant Design Vue组件库搭配vue-cropper插件进行封装
实现如下
html
<template> <div> <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :custom-request="customRequest" :before-upload="beforeUpload" :style="`width: ${width}; height: ${height};`" > <img v-if="imageUrl && !loading" :src="imageUrl" alt="avatar" :style="`width: ${width}; height: ${height};`" /> <div v-else> <a-icon :type="loading ? 'loading' : 'plus'" /> <div class="ant-upload-text">上传图片</div> </div> </a-upload> <a-modal v-model="imageCut.isShowModal" title="图片截取" width="400px" @ok="finish" @cancel="imageCut.close" > <div class="cropper-content" v-if="imageCut.isShowModal"> <div class="cropper" style="text-align:center"> <vueCropper ref="cropper" :img="imageCut.imgFile" :outputSize="outputSize" :outputType="outputType" :info="info" :full="full" :canMove="canMove" :canMoveBox="canMoveBox" :original="original" :autoCrop="autoCrop" :fixed="fixed" :fixedNumber="fixedNumber" :centerBox="centerBox" :infoTrue="infoTrue" :fixedBox="fixedBox" ></vueCropper> </div> </div> </a-modal> </div> </template>
js
<script> import { uploadImage } from '@/api/common' import { VueCropper } from "vue-cropper"; export default { name: 'ImageUpload', components: { VueCropper }, data() { return { loading: false, imageCut: { isShowModal: false, imgFile: '', init: imgFile => { this.imageCut.imgFile = imgFile this.imageCut.isShowModal = true }, close: () => { this.imageCut.imgFile = '' this.imageCut.isShowModal = false } } } }, props: { imageUrl: String, width: { type: String, default: '100px' }, height: { type: String, default: '100px' }, canCut: { type: Boolean, default: false }, info: { type: Boolean, default: false }, // 裁剪框的大小信息 outputSize: { type: Number, default: 0.8 }, // 裁剪生成图片的质量 outputType: { type: String, default: 'jpeg' }, // 裁剪生成图片的格式 canScale: { type: Boolean, default: true }, // 图片是否允许滚轮缩放 autoCrop: { type: Boolean, default: true }, // 是否默认生成截图框 // autoCropWidth: 300, // 默认生成截图框宽度 // autoCropHeight: 200, // 默认生成截图框高度 fixedBox: { type: Boolean, default: false }, // 固定截图框大小 不允许改变 fixed: { type: Boolean, default: true }, // 是否开启截图框宽高固定比例 fixedNumber: { type: Array, default: () => [1, 1] }, // 截图框的宽高比例 full: { type: Boolean, default: true }, // 是否输出原图比例的截图 canMove: { type: Boolean, default: false }, canMoveBox: { type: Boolean, default: true }, // 截图框能否拖动 original: { type: Boolean, default: false }, // 上传图片按照原始比例渲染 centerBox: { type: Boolean, default: true }, // 截图框是否被限制在图片里面 infoTrue: { type: Boolean, default: true } // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 }, methods: { beforeUpload(file) { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' if (!isJpgOrPng) { this.$message.error('请上传JPG或PNG文件!') } const isLt2M = file.size / 1024 / 1024 < 2 if (!isLt2M) { this.$message.error('请上传2MB以下文件!') } return isJpgOrPng && isLt2M }, customRequest(file) { if (this.canCut) { this.readFile(file.file) } else { this.loading = true const formData = new FormData() formData.append('fileIdcard', file.file) uploadImage(formData).then(res => { this.loading = false this.$emit('uploadSuccess', res.ossUrl) }) } }, readFile(file) { var reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { this.imageCut.init(reader.result) } }, finish() { this.$refs.cropper.getCropBlob(data => { this.loading = true // 上传阿里云服务器 const formData = new FormData() formData.append('fileIdcard', data) uploadImage(formData).then(res => { this.imageCut.close() this.loading = false this.$emit('uploadSuccess', res.ossUrl) }) }) } } } </script>
css
<style lang="less"> .avatar-uploader > .ant-upload { width: 100%; height: 100%; } .ant-upload-select-picture-card i { font-size: 32px; color: #999; } .ant-upload-select-picture-card .ant-upload-text { margin-top: 8px; color: #666; } .cropper-content { .cropper { width: auto; height: 400px; } } </style>
组件使用及说明
<image-upload :imageUrl="form.diagramUrl" @uploadSuccess="uploadSuccess" width="160px" height="90px" :can-edit="canCut" :fixed-number="[16,9]" />
组件调用时需传入canEdit属性,指定组件是否启动图片选取后的裁剪功能,默认值为不启用裁剪;需裁剪时可传入fixedNumber属性,定义裁剪框的宽高比
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01