vue项目,axios请求图片接口,接口返回的是文件流的形式,如何转换成图片?...

axios
  .get('/captcha', {
    params: param,
    responseType: 'arraybuffer'
  })
  .then(response => {
    return 'data:image/png;base64,' + btoa(
      new Uint8Array(response.data)
        .reduce((data, byte) => data + String.fromCharCode(byte), '')
    );
  }).then(data => {
    ...
  })

 这样写即可,

如果请求中没有额外的头信息,只需要加img标签src=请求接口地址即可

转载于:https://www.cnblogs.com/ttjm/p/10394184.html

### Vue3 Axios 请求拦截器添加 UserID 和 SessionID 在 Vue3 项目中通过 TypeScript 封装 `axios` 并利用请求拦截器来自动附加 `userid` 和 `sessionid` 是一种常见做法。这不仅简化了每次发送请求时手动加入这些参数的过程,还提高了代码的可维护性和安全性。 #### 创建 Axios 实例配置 首先,在项目的合适位置创建一个新的 JavaScript 或 TypeScript 文件用于初始化 `axios` 的实例,并在此处设置基础 URL 及其他全局默认选项: ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 应该从环境变量读取API的基础路径 timeout: 5000 // 设置超时时长 }); ``` #### 配置请求拦截器 接着定义请求拦截器以便于可以在每个发出的 HTTP 请求前处理数据,比如在这里插入用户的认证信息: ```javascript service.interceptors.request.use( config => { const userInformation = JSON.parse(localStorage.getItem('user') || '{}'); if (userInformation && userInformation.userid) { config.headers['X-user-id'] = userInformation.userid; } if (userInformation && userInformation.sessionid) { config.headers['X-session-id'] = userInformation.sessionid; } return config; }, error => Promise.reject(error) ); ``` 上述代码片段展示了如何获取存储在本地浏览器中的用户信息对象(假设是以字符串形式保存),并通过检查其是否存在以及是否含有有效的 `userid` 和 `sessionid` 来决定是否向请求头中添加相应的字段[^1]。 #### 处理响应拦截器 为了确保应用程序能够正确应对服务器返回的不同状态码或其他异常情况,还可以配置响应拦截器来进行统一错误处理或重定向逻辑: ```javascript service.interceptors.response.use( response => response.data, error => { console.error(`Error occurred during request ${error.config.url}`, error.message); if (!error.response) { alert("网络连接失败"); return Promise.reject(new Error("Network Error")); } else { switch (error.response.status) { case 401: window.location.href = '/login'; break; default: break; } return Promise.reject(error); } } ); ``` 最后导出这个自定义的服务实例供整个应用使用: ```javascript export default service; ``` 这样就完成了基于 Vue3 和 TypeScript 对 `axios` 进行封装的工作,使得后续所有的 API 调用都可以方便地携带必要的身份验证信息而无需重复编码[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值