文件预览组件

2021-09-13 13:42:46 +08:00
parent 381ed8777c
commit 688b0c00f9
3 changed files with 128 additions and 36 deletions
@@ -0,0 +1,88 @@
+<template>
+  <!--  父组件的文件id如果是异步获取的 需要加上v-if判断-->
+<div style="display: inline-block">  <span @click="handlePreview(item)" class="color-blue" v-for="(item) of fileList" :key="item.id">{{ item.name +'  ' }}</span></div>
+</template>
+
+<script>
+import Vue from 'vue'
+import {ACCESS_TOKEN} from '@/store/mutation-types'
+import {getFileInfo} from '@/api/api'
+// eslint-disable-next-line
+const Base64 = require('js-base64').Base64
+
+
+export default {
+  name: 'PreviewFile',
+  props: {
+    /*
+    * 文件id
+    * */
+    fileId: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {
+      fileInfo: {},
+      fileList: [],
+    }
+  },
+  mounted() {
+    this.getFileInfo(this.fileId)
+  },
+  watch: {
+    fileId: {
+      immediate: true,
+      handler(val) {
+        this.initFileList(val)
+      }
+    }
+  },
+  methods: {
+    /*
+    * 通过文件id获取文件的相关信息
+    * */
+    getFileInfo(id) {
+      return new Promise(resolve => {
+        let result = {}
+        getFileInfo({id: id}).then(res => {
+          if (res.success) {
+            result = res.result
+          }
+        }).finally(() => {
+          resolve(result)
+        })
+      })
+    },
+    /*
+    * 获取文件信息
+    * */
+    async initFileList(fileIds) {
+      const fileList = []
+      let arr = fileIds.split(',')
+      for (let i = 0; i < arr.length; i++) {
+        let fileObj = {}
+        fileObj = await this.getFileInfo(arr[i])
+        fileList.push({id: fileObj.id, name: fileObj.fileName})
+      }
+      this.fileList = [...fileList]
+    },
+    handlePreview(file) {
+      if (file && file.id) {
+        const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
+        let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
+        // let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
+        window.open(url)
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+.color-blue {
+  color: #069f99 !important;
+  cursor: pointer;
+}
+</style>