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实现pc聊天页面(vue实现web在线聊天功能)
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- vue 实现吸顶效果(vue实现水波涟漪效果的点击反馈指令)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue原理详解(vue响应式原理与双向数据的深入解析)
- vue渲染数据的过程(Vue前端高效开发之列表渲染指令)
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- vue怎么定义router的动态路由(vue.js Router中嵌套路由的实用示例)
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vue重置密码(Vue 两个字段联合校验之修改密码功能的实现)
- vue和springboot实战项目(vue+spring boot实现校验码功能)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- vue组件方法里如何修改data(vue项目中使用rem替换px的实现示例)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
- 《白狐的人生》热拍 贾征宇偶像包袱难自弃 图(白狐的人生热拍)
- 七夕取消了,牛郎织女没做核酸七夕已经取消(牛郎织女没做核酸七夕已经取消)
- 网友抵制 多地取消 夏日祭 为何惹众怒(网友抵制多地取消)
- 兄弟萌,今年的七夕又取消了 思考 思考(今年的七夕又取消了)
- 七夕取消是什么梗(七夕取消是什么梗)
热门推荐
- pgsql函数里有多个事务如何处理(关于SQL数据库 msdb.dbo.sp_send_dbmail 函数发送邮件的场景分析)
- 宝塔面板安装ssl证书网站打不开(宝塔面板如何配置SSL证书?)
- mysql数值类型图解(详解mysql持久化统计信息)
- python操作json格式(详解python 3.6 安装json 模块simplejson)
- nginx怎么配置静态文件(Nginx 过滤静态资源文件的访问日志的实现)
- dedecms系统怎么查看(DedeCMS V5.3/V5.5/V5.7 安全设置指南 图文推荐)
- thinkphp5开发教程(thinkPHP5框架接口写法简单示例)
- 织梦的控制层使用方法(织梦系统参数设置出现Token mismatch!提示的解决办法)
- dockerbuild清除缓存(Docker自动化构建Automated Build实现过程图解)
- 日常操作docker命令(SEATA事务服务DOCKER部署的过程详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9