guns-separation/_web/src/views/system/file/previewForm.vue

<template>
  <a-modal
    title="预览图片"
    :footer="null"
    :width="900"
    :visible="visible"
    @cancel="handleCancel"
  >
    <a-spin :spinning="divLoading">
      <div style="text-align: center">
        <img :src="src" style="max-width: 99%">
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
  import { sysFileInfoPreview } from '@/api/modular/system/fileManage'
  export default {
    data () {
      return {
        visible: false,
        src: '',
        divLoading: false
      }
    },
    methods: {
      /**
       * 初始化
       */
      preview (record) {
        this.visible = true
        this.divLoading = true
        this.sysFileInfoPreview(record)
      },
      /**
       * 获取图片并转为链接
       */
      sysFileInfoPreview (record) {
        sysFileInfoPreview({ id: record.id }).then((res) => {
          this.divLoading = false
          this.downloadfile(res)
        }).catch((err) => {
          this.divLoading = false
          this.$message.error('预览错误：' + err.message)
        })
      },
      /**
       * 转图片类型
       */
      downloadfile (res) {
        const blob = new Blob([res])
        this.src = window.URL.createObjectURL(blob)
      },
      handleCancel () {
        this.src = ''
        this.visible = false
      }
    }
  }
</script>