前端二进制流转base64 （亲测有效）

虚拟中的神

已于 2022-11-01 11:09:14 修改

阅读量1w

点赞数 6

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript

于 2022-05-06 11:31:00 首次发布

本文链接：https://blog.csdn.net/m0_60067716/article/details/124606097

这篇博客介绍了如何在Vue中将从URL获取的二进制流转换为Base64格式。首先通过axios以'blob'响应类型获取图片的二进制流，然后利用FileReader将二进制流转换为Base64编码。整个过程涉及关键步骤包括设置axios的responseType和Blob对象的type属性，确保转换成功并能正确显示图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

base64转二进制流在这https://mp.csdn.net/mp_blog/creation/editor/124629402

第一步：拿到二进制流

    //网上随便找的图片
    const url =
      "https://img0.baidu.com/it/u=73689209,3130028231&fm=253&fmt=auto&app=138&f=JPEG";
    axios
      .get(url, {
        responseType: "blob", //一定要传！！！
      })
      .then((res) => {
        console.log(res.data, "二进制流");
      });

二进制流长这样

第二步：转base64

    // 二进制流转换为base64 格式。
    getBase64(data) {
      return new Promise((resolve, reject) => {
        const blob = new Blob([data], { type: "image/jpeg" }); //类型一定要写！！！
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
      });
    },

base64长这样

注意：

请求头 responseType: "blob" 一定要转。否则格式不对
const blob = new Blob([res.data], { type: "image/jpg" }) 的type一定要写。否则转后的base64打不开

vue完整代码。粘贴即用（没安装axios当我没说）

<template>
  <div class="app"></div>
</template>
<script>
import axios from "axios";
export default {
  name: "app",
  data() {
    return {};
  },
  methods: {
    // 二进制流转换为base64 格式。
    getBase64(data) {
      const blob = new Blob([data], { type: "image/jpg" }); //类型一定要写！！！
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
      });
    },
  },

  mounted() {
    //网上随便找的图片
    const url =
      "https://img0.baidu.com/it/u=73689209,3130028231&fm=253&fmt=auto&app=138&f=JPEG";
    axios
      .get(url, {
        responseType: "blob", //一定要传！！！
      })
      .then((res) => {
        console.log(res.data, "二进制流");
        this.getBase64(res.data).then((binary) => {
          console.log(binary, "base64");
          document.body.innerHTML = binary;
        });
      });
  },
};
</script>