vue跨域下载img的src图片

最新推荐文章于 2024-05-29 16:26:45 发布

_nicedays

最新推荐文章于 2024-05-29 16:26:45 发布

阅读量1.1k

点赞数

分类专栏：前端 Vue js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qqq6654066/article/details/127000439

版权

前端同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

Vue

16 篇文章 0 订阅

订阅专栏

这里以下载img的src图片为例

首先增加需要跨域下载的接口

export const getImage(url)=>{
    return axios({
        method:'get',
        url:'/loadImg'+url,
        responseType:'blob'
    })
}

这里添加/loadImg的标识用于匹配服务器使用

然后在vue.config.js的devServer中添加以下配置

proxy:{
    '/loadImg':{
        target:'http://跨域地址:1234/imgpool',
        ws:false,
        changeOrigin:true,
        pathRewrite:{
            '^/loadImg':''
        }
    }

}

在这里配置好接口跨域访问的地址

然后就可以在页面中写下载文件的逻辑了

downloadImage(blob){
    var name=new Date().getTime()
    var a=document.createElement('a')
    a.download=name+'.png'
    a.href=window.URL.createObjectURL(blob.data)
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

这样就可以实现跨域下载了