vue二维码解码器（增加上传二维码之后弹窗预览）

对之前的二维码解码器做的功能扩展，增加上传成功时弹框显示二维码图片预览，弹框使用vant ui 实现
vanr ui 文档地址 https://youzan.github.io/vant/#/zh-CN/intro

首先安装 qrcode-decoder

npm install qrcode-reader

然后在组件中

<template><div class="module-content"><!--解析二维码--><h1 class="module-head">解析二维码</h1><div class="box" id="analytic" style="position: relative;"><h3>长按二维码解析</h3>[外链图片转存失败(img-rmp7uDdM-1562141512342)(https://mp.csdn.net/mdeditor/tyfo.png)]<p class="url-box" id="urlBox"></p></div><div class="box"><h3>上传二维码解析</h3><div style="position: relative;">[外链图片转存失败(img-jDL9fkbI-1562141512350)(https://mp.csdn.net/mdeditor/tu.png)]<input type="file" @change="getUrl('file-url')" name="" id="file" value=""/><p class="url-box"></p></div></div><!--弹框--><van-dialog v-model="showCode" show-cancel-button :beforeClose="beforeClose"><p id="result"><van-loading type="spinner" class="#1989fa" v-if="show"></van-loading></p></van-dialog></div>
</template><script>import QrcodeDecoder from 'qrcode-decoder';export default {name: "qrcode",data(){return{miningList:[],loading:false,finished:false,pageNo:1,pageSize:10,AllLoading:false,showCode:false,imgUrl:'',id:'',prcodeValus:'',show:true}}methods: {//本次修改主要代码，点击弹框取消或者确定按钮时逻辑处理beforeClose(action,done){var result = document.getElementById("resylt");if(action == 'confirm'){//点击确认按钮let data = {id:this.id,prcodeValus:this.prcodeValus};this.$Api.getUpdateQrode(data).then(res=>{//提交 获取到的url到后台if(res.code == '200' ){done();//关闭弹窗//done(false);//不关闭弹窗result.innerHTML = '';//清除动态创建的img}})}else{//点击取消按钮done();//关闭弹窗result.innerHTML = '';//清除动态创建的img}},getUrl(type) {let elem = document.getElementById('file');console.log(elem);let qr = new QrcodeDecoder();let url = null;//本次扩展功能主要代码let reader = new FileReader();reader.readAsDataURL(elem.files[0]);//调用内置readAsDataURL()方法reader.onload = function (e){//上传完成之后执行var result = document.getElementById('resule');//显示图片result .innerHTML = '<img src = "'+this.resule+'" width="100%">'//动态创建img，用来展示预览的图片，this，指的是onload当前this，this.resule//上传图片的二进制地址}if (type === 'img-url') {url = elem.src;} else if (type === 'file-url' && elem.files.length > 0) {url = this.getObjectURL(elem.files[0]);}qr.decodeFromImage(url).then((res) => {//打印结果为 解析出来的 二维码地址console.log(res.data);if(res){if(res.data !== ''){this.miningList[i].qrcodeUrl = res.data;this.id = this.miningList[i].id;this.qrcodeValue = this.miningList[i].qrcodeUrl}}else{this,AllLoading = false;this.$toast({type:'error',message:'二维码格式错误，请重新上传',duration:1000})}});},getObjectURL(file) {let url = null;if (window.createObjectURL !== undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL !== undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL !== undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;}}}
</script><style scoped>body {margin: 0;}.module-content {min-width: 320px;max-width: 1000px;width: 100%;color: #000;margin: 0 auto;padding-left: 10px;box-sizing: border-box;}.module-head {text-align: center;font-weight: 500;margin: 0;font-size: 30px;height: 100px;line-height: 100px;color: #000;}.box h3 {font-weight: 300;margin: 0;font-size: 20px;height: 60px;line-height: 60px;color: #000;}.url-box {height: 30px;line-height: 30px;font-size: 14px;}#file {position: absolute;width: 120px;height: 120px;opacity: 0;top: 0;left: 0;overflow: hidden;z-index: 10;}
</style>

vue二维码解码器（增加上传二维码之后弹窗预览）相关推荐

微信小程序上传图片及文件（上传、下载、删除及预览）
微信小程序上传附件上传文件及图片下载,预览.删除自定义封装组件哪儿用哪儿调用即可 wxml代码 <!-- <view>上传文件(我是子组件)</view> --& ...
java 调用 swf 文件上传_java SpringMvc 实现文件在线预览(openoffice+swftools+flexpaper)
项目需求:服务器接受的文件当下只能下载之后才能浏览内容,现需要后台能在线浏览到文件内容,避免繁琐无用文件下载操作. 通过几天网上资料搜索,目前免费的在线预览开发技术使用最多还是(openoffice+ ...
android上传项目到码云_上传代码到码云
对比 github 和码云,码云在不付费的前提下可以建立私有项目,于是上传了一份代码到码云. 一.在码云上创建项目 1.创建设置项目项目设置 2.创建成功,复制地址创建成功二.打开终端 1.cd ...
fastdfs+nginx+keepalived+openoffice+lua 实现文件上传、下载、水印、预览（word、excel、ppt、txt），feign文件上传
前言最近刚刚实现的文件服务中心,记录一下,为没做过的人提供一下思路,由于本人技术有限,不足之处欢迎批评指正,共同学习,共同进步. 目录 Fastdfs集群搭建搭建keepalived 实现ngxi ...
本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
【SpringBoot高级篇】springboot实现上传docdocx文件格式转html在线预览v2.0
[SpringBoot高级篇]springboot实现上传doc&docx文件格式转html在线预览v2.0 pom 上传路径工具类 SpringMvc虚拟路径映射 doc转html工具类 d ...
微信小程序上传文件及图片（可以预览）
最近在写小程序项目,碰到了一个需求,需要用户可以上传各种类型的文件和图片,展示在页面上,并且点击还可以进行预览,就找了找微信小程序官网,写了一个例子,分享一下直接看代码: wxml: <vie ...
php仿微信多图片预览上传,PHP仿微信多图片预览上传功能
[html] view plain copy 在CODE上查看代码片派生到我的代码片 plupload上传 [javascript] view plain copy 在CODE上查看代码片派生到我的代 ...
bootstrap上传插件（fileinput.js）预览显示删除图标问题
预览时显示和不显示上传和删除图标,主要是通过 uploadUrl:"/..." 来控制,如果注释掉就会不显示 $(".fileupload").fileinpu ...

vue二维码解码器（增加上传二维码之后弹窗预览）

vue二维码解码器（增加上传二维码之后弹窗预览）相关推荐

最新文章

热门文章