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长这样

注意:

  1. 请求头 responseType: "blob" 一定要转。否则格式不对
  2. 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>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐