前端解决浏览器直接打开图片URL，下载问题

本周做的项目中有一个下载图片的功能，拿到后台返回的url,像文件一样，直接window.open,发现图片没有像文件一样被下载，而是重新打开了一个页面展示图片。然后我尝试了转成base64等方法也还是有跨域的问题。后来就想着自己把这个url,发送给Node，node转成数据流返回给我，我再下载。话不多说，上代码：

vue前端代码：

  downZip (urls) {            //urls为图片地址if (!urls) {this.fmsErr({ message: '没有下载地址' })return}this.$_post('/picDown', { url: urls }, { responseType: 'blob' }).then(res => {let blob = res.dataif ('msSaveOrOpenBlob' in navigator) {navigator.msSaveBlob(blob)} else {const timeStamp = new Date() - 0let elink = document.createElement('a')elink.download = `${timeStamp}.png`  //改一下图片名字为时间戳elink.style.display = 'none'elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()document.body.removeChild(elink)}}).catch(err => {console.log(err)this.fmsErr(err)}).then(() => {this.loading = false})},

node代码：

const express = require('express')
const request = require('request')
const router = express.Router()router.use('/', function (req, res, next) {const url = req.body.urlrequest.get({url: url,headers: {'Content-Type': 'application/octet-stream'}}).on('response', function (response) {this.pipe(res)})
})
module.exports = router

前端解决浏览器直接打开图片URL，下载问题相关推荐

关于微信内置浏览器，打开图片上传功能，调用的问题
关于微信内置浏览器,打开图片上传功能,调用的问题前段时间,项目完结测试的时候,同事打开魅族手机测试,无意中发现一个奇葩的问题! 描述: 显示的是文件系统,列表式的,没有调用相机的功能图标,为什么呢? ...
【python】根据pixiv网站的图片url下载图片到本地
写在前面 pixiv是著名的插画网站.如果我们通过爬虫技术得到了pixiv网站图片的url,那么如何根据url下载图片到本地. 安装模块 pip install requests 测试样例打开以下页 ...
图片下载（包含了download打开图片无法下载的方法）
利用a标签的download属性实现图片下载代码 <img src="../download/img/test.jpg" alt=""><a ...
如何解决浏览器无法打开网页问题
今天下午,在公司安装一个小的工具软件后,出现了浏览器无法打开网页的问题,然后试了下我本机安装的所有浏览器发现都不能正常打开网页了,尝试了很多方法都无法解决,最后怒卸chrom浏览器然后重新安装以期望能 ...
谷歌chrome浏览器扩展Fatkun图片批量下载
Fatkun图片批量下载谷歌浏览器扩展是一个从网页批量下载图片的扩展,提供方便简单的筛选功能,快速的批量下载图片.
javascript下载图片而不是浏览器默认打开图片
dataURLtoBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob( ...
前端解决微信公众号图片引用错误
问题出现项目有一个功能为导入微信文章, 查看导入文章是发现图片加载错误, 如下: 解决: 在网上搜索,前端,大致有以下3种解决方式: 1.添加meta标签, 这种方法试了无效 <meta n ...
根据图片url下载图片
const urlDownloadIamge = (imgsrc, name) => { //要下载图片地址和图片名let image = new Image();// 解决跨域 Canvas ...
ruby-下载图片，根据图片URL下载到本地
根据url链接下载对应的图片 require "open-uri" p url = "https://media.licdn.cn/dms/image/C4D03AQFN ...
解决浏览器不能打开摄像头问题
最近遇到这样的一个问题: 有一个线上考试,但是浏览器打不开摄像头.后来经过一系列的操作终于好了. 办法接下来会详细说明. 首先: 要确认你的摄像头是可以运行的,且是有打开授权的,麦克风是要确认打开,且 ...

前端解决浏览器直接打开图片URL，下载问题

前端解决浏览器直接打开图片URL，下载问题相关推荐

最新文章

热门文章