js axios vue 带身份验证的图片加载转base64（二进制文件资源处理）

最新推荐文章于 2024-02-28 19:08:33 发布

1999笃行

最新推荐文章于 2024-02-28 19:08:33 发布

阅读量271

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_29712303/article/details/130779216

版权

在Vue和Electron的项目中，使用Axios发送POST请求获取blob类型图片，然后通过FileReader读取转换为Base64编码，用于处理需要携带登录信息的缩略图请求。

摘要由CSDN通过智能技术生成

版本信息

"vue": "^2.6.14"
"axios": "^0.27.2"

背景

vue + electron 需要相应信息列表的缩略图；服务器端对所有请求都要求携带登录身份信息。
使用独立接口加载缩略图。

代码

        // 此处的http 是 axios 的简单封装，在封装的http中做了登录凭证获取
        //responseType: 'blob' 重要
        http.post(url,{imageid:1},{responseType: 'blob' }).then(res => {
          console.log(res)
          if (res.status == 200) {
            //此重要 直接 oFileReader.readAsDataURL(res.data) 不可用
            const blob = new Blob([res.data], { type: res.headers["content-type"] });
            let oFileReader = new FileReader();
            oFileReader.onloadend = (e) =>{
                // 此处拿到的已经是base64的图片了,可以赋值做相应的处理
                // e.target.result
                console.log(e.target.result)
            }
            oFileReader.readAsDataURL(blob);
          }

        }).catch(err => {
          console.log(err);
        });

此方法用于将资料转base64

            let oFileReader = new FileReader();
            oFileReader.onloadend = (e) =>{
                // 此处拿到的已经是base64的图片了,可以赋值做相应的处理
                // e.target.result
                console.log(e.target.result)
            }
            oFileReader.readAsDataURL(blob);