vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
类别:编程学习 浏览量:353
时间:2022-03-28 01:04:27 vue表单上传图片数据
vue-cropper插件实现图片截取上传组件封装基于vue-cropper插件实现图片截取上传组件封装的具体代码,供大家参考,具体内容如下
需求场景:
后台开发需要上传图片并进行相应比例尺寸图片的截取,本组件开发采用Ant Design Vue组件库搭配vue-cropper插件进行封装
实现如下
html
<template> <li> <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};`" /> <li v-else> <a-icon :type="loading ? 'loading' : 'plus'" /> <li class="ant-upload-text">上传图片</li> </li> </a-upload> <a-modal v-model="imageCut.isShowModal" title="图片截取" width="400px" @ok="finish" @cancel="imageCut.close" > <li class="cropper-content" v-if="imageCut.isShowModal"> <li 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> </li> </li> </a-modal> </li> </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: .jpg" alt="vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)" border="0" />
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的组件传值着手观察者模式(详解从vue的组件传值着手观察者模式)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- vue计算两个日期差几分钟(vue实现同时设置多个倒计时)
- vue接口请求类封装(Vue接口封装的完整步骤记录)
- vue可以使用模态框modal吗(vue基于Teleport实现Modal组件)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vue轮播图代码(vue实现无缝轮播效果跑马灯)
- vue实现树形结构菜单(vue递归实现三级菜单)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vue pdf预览插件(Vue-pdf实现在线预览PDF文件)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- springbootvue项目代码(Vue+SpringBoot实现支付宝沙箱支付的示例代码)
- vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vue实现pc聊天页面(vue实现web在线聊天功能)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- 我们现在吃的苹果是哪里来的 原来现代苹果引入中国仅有一百多年(我们现在吃的苹果是哪里来的)
- 买绿宝不能只挑黄绿色 菜农教你3招挑,个个皮薄肉脆,香甜爆汁(买绿宝不能只挑黄绿色)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
- 河南尉氏县因地制宜发展果蔬种植 水坡镇绿宝甜瓜变 金瓜(河南尉氏县因地制宜发展果蔬种植)
- 谢广坤,你这么欺负谢腾飞,良心不会痛吗(你这么欺负谢腾飞)
- 乡村爱情15 宋晓峰怀疑自己孩子,腾飞与姜奶奶亲子鉴定出结果(宋晓峰怀疑自己孩子)
热门推荐
- docker配置阿里云镜像(Docker镜像的制作,上传,拉取和部署操作利用阿里云)
- vue购物车简单项目(vue实现简单购物车案例)
- apache服务器配置https(Apache Rewrite url重定向功能的简单配置)
- filezillaserver怎么配置(解决FileZilla_Server:425 Can't open data connection 问题详解)
- url编码及解码(伪静态URL中文乱码问题解决方法)
- python自定义定时任务(python的schedule定时任务模块二次封装方法)
- EXEC和sp_executesql的区别
- nginx事件模型有几种(Python实现监控Nginx配置文件的不同并发送邮件报警功能示例)
- 阿里云服务器linux怎么使用(阿里云服务器linux系统挂载数据盘图文教程)
- html5淘汰的标签(浅谈HTML5新增和废弃的标签)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9