二进制流转成base64

需求： 加载表格每一项对应的图片

分析： 一般图片跟数据后端会放在一个数组里返回，由于我这里调用的是后端封装的第三方接口，图片需要单独去请求并且对应到每一项上

实现： 一开始在template里面写了一个img，绑定一个方法返回值，但一直都是返回的promise，没搞好，问了朋友，让我把图片转换维护在一个单独的组件，方便对应，imgUrl传递的是请求图片需要的参数

// thumbanil.vue

<div class="thumbnail-wrap">
    <img :src="base64" alt="">
</div>
export default {
  props: {
    imgUrl: String
  },
  data() {
    return {
      base64: ''
    }
  },
  methods: {
    async getBase64Url() {
      this.base64 = await getThumbnail({
        docid: this.imgUrl,
        height: 30,
        width: 30
      }).then(blob => URL.createObjectURL(blob)) // 将二进制流转换
    }
  },
  created() {
    this.getBase64Url()
  },
  // 销毁 URL.createObjectUR，防止页面卡顿
  beforeDestroyed() {
    URL.revokeObjectURL(this.base64)
  }
}