【fix bug】66408 【前端】文件上传组件JUpload预览问题

jero-web/src/components/jero/JUpload.vue

@@ -26,10 +26,14 @@
           <div class="ant-upload-text">{{ text }}</div>
         </div>
         <a-button v-else-if="buttonVisible">
-         <a-icon type="upload" />{{ text }}
+          <a-icon type="upload" />
+          {{ text }}
         </a-button>
       </template>
     </a-upload>
+
+    <j-image-preview-modal ref="imagePreviewModal" />
+
   </div>
 </template>
 
@@ -38,6 +42,8 @@
 import Vue from 'vue'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { getFileAccessHttpUrl } from '@/api/manage'
+import JImagePreviewModal from '@comp/jero/modal/JImagePreviewModal.vue'
+
 const Base64 = require('js-base64').Base64
 
 const FILE_TYPE_ALL = 'all'
@@ -46,8 +52,13 @@ const FILE_TYPE_IMG = 'image'
 const uidGenerator = () => {
   return '-' + parseInt(Math.random() * 10000 + 1 + '', 10)
 }
+
+// 支持预览的文件类型
+const CAN_PREVIEW_FILE_TYPE = ['pdf', 'image']
+
 export default {
   name: 'JUpload',
+  components: { JImagePreviewModal },
   data () {
     return {
       uploadAction: window._CONFIG.domianURL + '/sys/common/upload',
@@ -55,7 +66,8 @@ export default {
       fileList: [],
       newFileList: [],
       uploadGoOn: true,
-      containerId: null
+      containerId: null,
+      pdfPreviewURL: null
     }
   },
   props: {
@@ -93,10 +105,10 @@ export default {
       default: false
     },
     /**
-       * update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url，
-       * true：仅返回url
-       * false：返回fileName filePath fileSize
-       */
+     * update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url，
+     * true：仅返回url
+     * false：返回fileName filePath fileSize
+     */
     returnUrl: {
       type: Boolean,
       required: false,
@@ -285,11 +297,27 @@ export default {
       console.log(file)
     },
     handlePreview (file) {
-      if (file && file.url) {
-        const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
-        const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
-        window.open(url)
+      if (!file || !file.url) {
+        return
       }
+      const fileType = file.type
+      const canPreview = CAN_PREVIEW_FILE_TYPE.some(tt => fileType.indexOf(tt) !== -1)
+      // 判断是否为可预览格式的文件
+      if (!canPreview) {
+        this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
+          this.handleDownload(file)
+        })
+        return
+      }
+      const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
+      // 图片预览，使用自己添加的组件
+      if (fileType.indexOf(FILE_TYPE_IMG) !== -1) {
+        this.$refs.imagePreviewModal.open(fileFullUrl)
+        return
+      }
+      // pdf预览
+      const url = `/pdfjs/web/viewer.html?file=${encodeURIComponent(fileFullUrl)}`
+      window.open(url)
     },
     handleDownload (file) {
       if (file && file.url) {
@@ -298,7 +326,8 @@ export default {
       }
     }
   },
-  mounted () {},
+  mounted () {
+  },
   model: {
     prop: 'value',
     event: 'change'
@@ -307,14 +336,15 @@ export default {
 </script>
 
 <style lang="less">
-  .uploadty-disabled{
-    .ant-upload-list-item {
-      .anticon-close{
-        display: none;
-      }
-      .anticon-delete{
-        display: none;
-      }
+.uploadty-disabled {
+  .ant-upload-list-item {
+    .anticon-close {
+      display: none;
+    }
+
+    .anticon-delete {
+      display: none;
     }
   }
+}
 </style>

jero-web/src/components/jero/modal/JImagePreviewModal.vue

@@ -0,0 +1,42 @@
+<template>
+  <a-modal
+    title="图片预览"
+    :width="modalWidth"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :footer="null"
+    @cancel="close"
+    cancelText="关闭">
+    <img class="img-container" :src="imgUrl" alt="">
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'JImagePreviewModal',
+  data () {
+    return {
+      modalWidth: '60%',
+      visible: false,
+      confirmLoading: false,
+      imgUrl: ''
+    }
+  },
+  methods: {
+    open (imgUrl) {
+      this.imgUrl = imgUrl
+      this.visible = true
+    },
+    close () {
+      this.visible = false
+      this.imgUrl = ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.img-container {
+  width: 100%;
+}
+</style>