美文网首页
前端 图片流转换成base64

前端 图片流转换成base64

作者: 一只鱼_d589 | 来源:发表于2022-05-30 16:33 被阅读0次
<template>
  <div class="component-content">
      <img :src="imagesrc" alt="ICON图片">
  </div>
</template>
<script>
import axios from 'axios'

export default {
  data() {
    return {    
      path: 'E:\\HS21\\data\\model\\component\\thumbnail\\232132131123112.jpg',  
      imagesrc: '',
    };
  },
  mounted() {
        this.getImage(this.path)
  },
  methods: {
    getImage(path) {
      let that = this;
      axios({
        method: "GET",
        url: `http://192.168.0.252:32666/component/getIcon?iconPath=${path}`,
        responseType: "arraybuffer", //这个在请求头里必须加
      })
        .then((res) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((res) => {
          that.imagesrc = res;
          console.log('res',res)
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
}
</script>
<style lang="scss" scoped>
</style>

相关文章

网友评论

      本文标题:前端 图片流转换成base64

      本文链接:https://www.haomeiwen.com/subject/uzioprtx.html