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

3 篇文章 0 订阅
1 篇文章 0 订阅

本周做的项目中有一个下载图片的功能,拿到后台返回的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.data
        if ('msSaveOrOpenBlob' in navigator) {
          navigator.msSaveBlob(blob)
        } else {
          const timeStamp = new Date() - 0
          let 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.url
  request.get({
    url: url,
    headers: {
      'Content-Type': 'application/octet-stream'
    }
  }).on('response', function (response) {
    this.pipe(res)
  })
})
module.exports = router

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值