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

版本信息

"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);

你可能感兴趣的:(javascript,vue.js,前端)