vue实现图片上传数据库(vue.js根据图片url进行图片下载)
类别:编程学习 浏览量:709
时间:2021-10-21 07:29:07 vue实现图片上传数据库
vue.js根据图片url进行图片下载最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果,都是跳到一个新的图片网页,后来经过一番琢磨,终于解决了这个问题:
这是后台返回来的json数据(防止泄露重要信息IP地址打码了):
我在html里的引用是这样的:
<a @click="downCom" > 下载执照 <i class="icon-down"></i> </a>
vue.js方法里的下载图片方法:
downCom() { let that = this; this.$http.files().then(res => { let hreLocal=""; hreLocal = res.data.data.url; this.downloadByBlob(hreLocal,"pic") }); },
下面这个方法,可以直接拿去用,直接把你的图片url传给这个方法,就可以实现vue.js来下载图片了。
downloadByBlob(url,name) { let image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.src = url image.onload = () => { let canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height let ctx = canvas.getContext('2d') ctx.drawImage(image, 0, 0, image.width, image.height) canvas.toBlob((blob) => { let url = URL.createObjectURL(blob) download(url,name) // 用完释放URL对象 URL.revokeObjectURL(url) }) } },
调用的download(url,name)方法:
function download(href, name) { let eleLink = document.createElement('a') eleLink.download = name eleLink.href = href eleLink.click() eleLink.remove() }
完成上面的代码后,即可实现图片下载,而不是图片浏览啦。
最后成功实现点击即可下载图片,效果图如下:
到此这篇关于vue.js根据图片url进行图片下载的文章就介绍到这了,更多相关vue.js图片url进行图片下载内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue怎么注册公共组件(解读Vue组件注册方式)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vue和springboot分页开发实现(解决Vue+SpringBoot+Shiro跨域问题)
- vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vue-router的两种模式(vue-route路由管理的安装与配置方法)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue左右滑动切换(vue实现界面滑动效果)
- vue react和angular(详解React Angular Vue三大前端技术)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- mongovue的使用
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- vue怎么定义router的动态路由(vue.js Router中嵌套路由的实用示例)
- vuefor指令使用教程(Vue必学知识点之forEach的使用)
- 是不是快乐全被你拿走了(而是你得到的)
- 世界上只有妈妈好(世界上只有妈妈好的歌词)
- 为什么现在社会越来越卷了(现在社会为什么发展那么快呢)
- 直播带货能赚到很多钱吗(直播带货能赚到很多钱吗现在)
- 做网红真的很能赚钱吗(做网红真的很能赚钱吗)
- 10句英语常用(英语常用900句)
热门推荐
- laravel模型使用技巧(提高Laravel应用性能方法详解)
- python八卦图(Python实现九宫格式的朋友圈功能内附“马云”朋友圈)
- jquery轮播图的左右按钮(jQuery轮播图功能实现方法)
- dedecms如何知道是否授权(DedeCMS Error Warning!提示信息的修改方法)
- SQLServer2019安装教程图文详解(SQLServer2019安装教程图文详解)
- netcorelinux后台运作(Linux系统Docker 部署 ASP.NET Core应用的流程分析)
- dedecms缩略图优化教程(织梦DedeCMS V5.7缩略图站内上传修正)
- dedecms分页效果(dedecms重新定义cn_substr函数截取字数更准确)
- python pandas 匹配值(python 使用pandas计算累积求和的方法)
- docker数据卷挂载和共享目录挂载区别(Docker容器中挂载NFS共享目录的实现)