axios请求图片路径下载图片

import axios from 'axios'

 downloadLicense(url, fileName) {

      axios.defaults.withCredentials = true

  axios .get(url, {

          responseType: 'blob' // 1.首先设置responseType对象格式为 blob: // 二进制流

        })

        .then(

          (res) => {

            const blob = new Blob([res.data], {

              type: 'application/octet-stream'

            }) // 2.获取请求返回的response对象中的blob 设置文件类型

            const url = window.URL.createObjectURL(blob) // 3.创建一个临时的url指向blob对象

            // 4.创建url之后可以模拟对此文件对象的一系列操作,例如:预览、下载

            const a = document.createElement('a')

            a.href = url

            a.download = fileName + '.png'

            a.click()

            // 5.释放这个临时的对象url

            window.URL.revokeObjectURL(url)

          }

        )

        .catch((error) => {

          console.log(error)

        })

    },

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,感谢您的提问。如果您想在 Vue 中使用线上 Mock 模拟图片路径,并通过 Axios 请求数据,可以按照以下步骤进行: 1. 在 Vue 项目中安装 Axios 和 Mockjs: ``` npm install axios mockjs --save ``` 2. 在 Vue 项目的 main.js 中引入 Axios 和 Mockjs: ``` import axios from 'axios'; import Mock from 'mockjs'; ``` 3. 在 main.js 中配置 Axios请求拦截器,用于 Mock 模拟图片路径: ``` // 配置 Axios 请求拦截器 axios.interceptors.request.use((config) => { // 如果请求的 URL 是图片路径,则使用 Mock 模拟图片路径 if (/^\/api\/images\/.+/.test(config.url)) { config.url = Mock.Random.image('200x100', Mock.Random.color(), '#FFF', 'Mock Image'); } return config; }); ``` 在这里,我们使用了 Mock.Random.image() 方法来生成一个 200x100 大小的图片,并将其作为 Mock 模拟的图片路径返回。 4. 在组件中使用 Axios 发送请求,并将返回的数据与本地图片结合显示: ``` <template> <div> <img :src="localImage" alt="Local Image" /> <img :src="remoteImage" alt="Remote Image" /> </div> </template> <script> import axios from 'axios'; export default { data() { return { localImage: require('@/assets/images/local-image.png'), remoteImage: '', }; }, mounted() { // 发送 Axios 请求,获取远程数据 axios.get('/api/data') .then((response) => { // 将远程数据与本地图片结合显示 this.remoteImage = response.data.image; }) .catch((error) => { console.error(error); }); }, }; </script> ``` 在这里,我们使用了 require() 方法将本地图片引入,并将其作为 Vue 组件中的 data 数据。然后,使用 Axios 发送请求,获取远程数据,并将返回的图片路径与本地图片路径结合显示。 希望这些步骤可以帮助您实现在 Vue 中使用线上 Mock 模拟图片路径,并通过 Axios 请求数据,结合本地图片进行显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值