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

虚拟中的神

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

阅读量8.3k

点赞数 5

文章标签：前端 vue.js javascript

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

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

版权

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>