前端从服务端获取文件流并展示图片和pdfimage vue 展示图片 <img :src="imgUrl"/> 获取并展

image vue 展示图片 <img :src="imgUrl"/>

  async getImg(fileKey) {
      const params = {
        fileKey,
      };
      const file = await request(api.customerGetPicture, params, {
        responseType: "arraybuffer"
      });
      const blob = new Blob([file], {
        type: "application/image"
      });
      const blobUrl = window.URL.createObjectURL(blob);
      this.imgUrl=blobUrl;
      //return blobUrl;
    },

获取并展示Pdf,需要一个pdf组件（vue-pdf），

<div class="content-area">
      <pdf v-for="i in numPages" :key="i" :src="pdfUrl" :page="i" />
</div>

data(){
return{
  pdfUrl: null,
  numPages: undefined,
}
}

import pdf from 'vue-pdf';

  async initPdf() {

      const url = await this.getPdf(); 
      this.pdfUrl = pdf.createLoadingTask(url);
      this.pdfUrl.promise.then((pdf) => {
        this.$nextTick(() => {
          this.numPages = pdf.numPages;
        }, 1000);
      });
    },
    
 async getPdf() {
      const params = {
        
      };
      const file = await request(api.customerGetContractPicture, params, {
        responseType: 'arraybuffer',
      });
      const blob = new Blob([file], {
        type: 'application/pdf',
      });
      const blobUrl = window.URL.createObjectURL(blob);
      return blobUrl;
    },