vue显示后端传递的图片流

一、显示部分（组件我使用的vuetify）

<template>
  <v-container fluid>
    <v-card width="100%" max-width="100%" class="mb-5">
      <div class="mb-2 d-flex align-center justify-start">
        <v-btn color="primary" class="mr-50" @click="back" small="">返回行程列表</v-btn>
      </div>
      <img :src="codeImg" alt="" />
    </v-card>
  </v-container>
</template>

<script>

import * as api from '../../../api/index';

export default {

  data() {

    return {

      lineId: '',

      driverId: '',

      channel: 1,

      codeImg: '',

    };

  },

  mounted() {

    this.lineId = Number(this.$route.params.lineId);

    this.driverId = Number(this.$route.params.driverId);

    this.channel = Number(this.$route.params.channel);

    this.getTripQrCode();

  },

  methods: {

    getTripQrCode() {

      const data = {

        lineId: this.lineId,

        channel: this.channel,

      };

　　//这里注意调用接口时，要加上：responseType: 'arraybuffer',

      api.main

        .op_line_qrcode_generateTripQrCode_get({

          params: data,

          responseType: 'arraybuffer',

        })

        // eslint-disable-next-line promise/always-return

        .then(res => {

　　　　　　//这里就是将得到的图片流转换成blob类型

          const blob = new Blob([res.data], {

            type: 'application/png;charset=utf-8',

          });

          const url = window.URL.createObjectURL(blob);

          this.codeImg = url;

        })

        .catch(err => {

          console.log(err);

        });

    },

    back() {

      this.$router.go(-1);

    },

  },

};

</script>