element-ui 上传图片后标注坐标点
更新时间:2021年7月8日 15:00 点击:2026
什么是element-ui
element-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件库,而手机端有对应框架是 Mint UI 。整个ui风格简约,很实用,同时也极大的提高了开发者的效率,是一个非常受欢迎的组件库。
页面大概如下:
组件使用的是layui的layer.open弹框。
左边是表单信息,右边是绘图区域。
原文件mapForm.vue
<template> <div class="mapForm"> <div class="left"> <el-form ref="form" :model="form" :rules="rules" label-width="160px"> <el-form-item label="地图名称" prop="mapName"> <el-input v-model="form.mapName" size="mini" clearable class="formInputClass"></el-input> </el-form-item> <el-form-item label="地图描述" prop="remarks"> <el-input type="textarea" v-model="form.remarks" size="mini" clearable class="formInputClass"></el-input> </el-form-item> <el-form-item label="点位信息" prop="" v-if="mapList.length > 0"> <div class="mapContent"> <div v-for="(map,key) in mapList" :key="key"> <div class="pointAbscissaOrdinate"><span>点位坐标{{key+1}}:{{map.abscissa}}-{{map.ordinate}}</span></div> <el-select v-model="mapList[key]['point']" placeholder="请选择" class="selectClass" @change="changePoint"> <el-option v-for="(item, key) in pointList" :key="key" :label="item.name" :value="item.point"> </el-option> </el-select> </div> </div> </el-form-item> <div class="btn"> <el-button @click="checkParams" type="primary">提交</el-button> </div> </el-form> </div> <div class="right" id=""> <div class="imgDiv" id="imgDiv" v-loading="loadStage"> <img :src="fileSrc" width="1100" height="720" id="imgPainter" /> <div class="marker" v-for="(item, key) in mapList" :key="key" :style="{top: item.ordinate+'px', 'left': item.abscissa+'px'}" @contextmenu.prevent="clearMarker(key)"> {{key+1}} <div class="ponint">{{item.point}}</div> </div> </div> <div class="uploadBtn"> <el-upload class="upload-demo" ref="upload" action="" :on-change="handleChange" :show-file-list="false" :on-remove="handleRemove" :auto-upload="false" style="display:inline-block;"> <el-button slot="trigger" size="mini" type="primary">选取文件</el-button> </el-upload> <el-button @click="clearPic" type="danger">清除所有点位</el-button> </div> <div class="info"><i class="el-icon-info"></i>显示大小为1100px*720px</div> <div class="info"><i class="el-icon-info"></i>图片框内鼠标左键标点</div> <div class="info"><i class="el-icon-info"></i>图片框内鼠标右键已经标注的点删除该点</div> </div> </div> </template> <script> export default { name: 'mapFormComponent', data() { return { form: { mapName: "", }, rules: { mapName: [ { required: true, message: "请输入地图名称", trigger: "blur" }, ], }, fileList: [], fileSrc: '', pointList: [ { name: "排放口1", point: "@FQ01" }, { name: "排放口2", point: "@FQ02" }, ], mapList: [], //斑马线的数组 canBiaoZhu: true, //是否可以进行标注 pointColor: 'red', //点的颜色 pointSize: 20, //点的大小 pointSelectList: {}, notifyId: {}, loadStage: false, }; }, created() { }, mounted() { // 绘点区域事件绑定 let _this = this; if (document.getElementById('imgPainter')) { document.getElementById('imgPainter').onmousedown = (e) => { e = e || window.event if (e.button !== 2) { //判断是否右击 if (this.canBiaoZhu && this.fileSrc != '') { //判断是否可以进行标注 需上传图片 var x = e.offsetX || e.layerX var y = e.offsetY || e.layerY this.mapList.push({ id: this.mapList.length + 1, name: '', abscissa: x, ordinate: y, }) // 设置变量 // this.pointSelectList.$set(0); let key = `point`; _this.$set(this.mapList[this.mapList.length - 1], key, "") } else { //提示上传图片 // 只显示一次 if (_this.notifyId.id) _this.notifyId.close(); this.notifyId = _this.$notify.error({ title: '提示信息', message: '请先上传图片后再标点', showClose: true, }); } } else { return false } } } // 右键阻止 var oDiv1 = document.getElementById('imgDiv'); oDiv1.oncontextmenu = function (ev) { var e = e || window.event; //阻止冒泡 e.cancelBubble = true; //阻止触发默认事件 e.returnValue = false; } }, methods: { changePoint() { /**point change */ this.$forceUpdate(); }, clearMarker(index) { /**清除marker */ this.mapList.splice(index, 1); }, handleChange(file, fileList) { this.loadStage = true; let fileName = file.name; let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/; if (regex.test(fileName.toLowerCase())) { this.fileSrc = URL.createObjectURL(file.raw) // 获取URL console.log(this.fileSrc); } else { this.$message.error('请选择图片文件'); } this.loadStage = false; }, clearPic() { /**清除图片 */ this.mapList = []; }, checkParams() { /*** * 验证提交信息 */ this.$refs["form"].validate((valid) => { if (valid) { let params = this.form; this.submit(params); } }); }, async submit(params) { /**提交 */ let resp = await this.$api.companyApiList .addEditCompany(params); if (resp.data.code != "error") { // 判断是否新增修改 this.$notify.success({ title: "提示", message: resp.data.msg, showClose: true, }); let type = params.id && params.id != '' ? 'edit' : 'add'; this.$emit("update", type); // 清空表单数据 this.$refs.form.resetFields(); } }, }, }; </script> <style scoped lang="less"> /** 表单样式 */ .mapForm { display: flex; padding: 10px; border: 1px solid pink; .left { flex: 2; border-right: 1px dashed pink; margin-right: 4px; .mapContent { height: 700px; overflow-y: auto; .selectClass { margin: 0px 5px; } .pointAbscissaOrdinate { display: inline-block; width: 140px; } } } .right { flex: 8; // border: 1px solid pink; max-width: 1100px; .imgDiv { position: relative; height: 720px; border: 2px solid cornflowerblue; .marker { position: absolute; border-radius: 50%; z-index: 999; width: 20px; height: 20px; background-color: red; text-align: center; line-height: 20px; color: yellow; .ponint { display: block; position: absolute; left: 20px; top: 0px; font-size: 12px; color: blue; } } .marker:hover .ponint { display: block; } } .info { font-size: 12px; } .uploadBtn { margin: 10px 0px; } } .btn { padding-left: 160px; } } .formInputClass { width: 200px; } </style>
标点的效果如下:
到此这篇关于element-ui 上传图片后标注坐标点的文章就介绍到这了,更多相关element-ui 上传图片内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
- EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码 代码如下: if...2013-09-23
- DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序。包含了SQL注入、XSS、盲注等常见的一些安全漏洞...2016-11-25
- PHP代码如下:复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04
借助FileReader实现将文件编码为Base64后通过AJAX上传
这篇文章主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下...2015-12-25- 这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-25
- 本案例非通用,仅作笔记以备用 修改后的结果是 百度编辑器里上传的图片路径为/d/file/upload1...2014-07-03
详解element-ui 表单校验 Rules 配置 常用黑科技
这篇文章主要介绍了element-ui 表单校验 Rules 配置 常用黑科技,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11- 这篇文章主要介绍了SpringMVC文件上传原理及实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-15
- 这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12
- APC模块,它的全称是Alternative PHP Cache。APC可以将所有PHP代码会被缓存起来, 另外它可提供一定的内存缓存功能.但是这个功能并不是十分完美,有报告说如果频繁使用APC缓存的写入功能,会导致不可预料的错误.如果想使用...2015-10-30
- 这篇文章主要介绍了smartupload实现文件上传时获取表单数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2017-01-09
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01- 本文实例讲述了PHP多文件上传类,分享给大家供大家参考。具体如下:<?phpclass Test_Upload{ protected $_uploaded = array(); protected $_destination; protected $_max = 1024000; protected $_messages =...2015-10-30
- 这篇文章主要介绍了Java实现将图片上传到webapp路径下 路径获取方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-11-12
解析element-ui中upload组件传递文件及其他参数的问题
这篇文章主要介绍了element-ui中upload组件如何传递文件及其他参数,分析一下我使用element-ui遇到的问题以及解决方法,需要的朋友可以参考下...2021-11-10