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设置属性没响应(Vue.$set 失效的坑 问题发现及解决方案)
- vue router用法(如何在Vue 3中扩展Vue Router链接详解)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- vue3 composition api用法(vue3中provide和inject的使用)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- 面试问vue掌握程度如何回答(面试最常问的13种Vue修饰符)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- ant design 的vue批量操作(ant desing vue table 实现可伸缩列的完整例子)
- vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
- vue如何获取元素(vue第一次获取不到元素的解决方法记录)
- vueweb端聊天(Vue实现聊天界面)
- vue各种模块(一篇文章学会Vue中间件管道)
- vue点击导航进行内容切换(vue实现顶部左右滑动导航)
- 这里输入关键词(怎么输入关键词搜索)
- 34岁的舒畅,就这样走到了末路,不知会不会后悔15年前的草率决定(就这样走到了末路)
- 不走心的古装造型 舒畅 毁容式 出演,萧蔷雷出新高度(不走心的古装造型)
- 嘉南传 第22集(嘉南传第22集)
- 哪版孙悟空最萌 黄渤躺萌了(哪版孙悟空最萌)
- 融入小人物的喜怒哀乐,黄渤饰演的角色为什么让人观看时欲罢不能(融入小人物的喜怒哀乐)
热门推荐
- sqlserver索引策略(SQLServer性能优化--间接实现函数索引或者Hash索引)
- Vps主机和云服务器的区别(Vps主机和云服务器的区别)
- phpredis怎么测试成功(PHP+redis实现的限制抢购防止商品超发功能详解)
- numpy如何创建数组(NumPy 数组使用大全)
- 百度地图获取api过程(JavaScript接入百度地图API的方法步骤)
- dockerbuild清除缓存(Docker自动化构建Automated Build实现过程图解)
- mysql多行数据之和(详解MySQL的数据行和行溢出机制)
- vue react和angular(详解React Angular Vue三大前端技术)
- sqlserver拒绝访问怎么办(SQL server服务显示远程过程调用失败的解决方法)
- css中id和class的选择