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

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

@@ -32,6 +32,12 @@
       </template>
     </a-upload>
 
+    <div id="images">
+      <div class="image" v-viewer="{movable: false}">
+        <img v-show="image" :src="imageUrl">
+      </div>
+    </div>
+
     <j-image-preview-modal ref="imagePreviewModal" />
 
   </div>
@@ -41,11 +47,14 @@
 
 import Vue from 'vue'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
-import { getFileAccessHttpUrl } from '@/api/manage'
+import { getFileAccessHttpUrl, downloadFile } from '@/api/manage'
+import { previewPdf } from '@/utils/previewPdf'
 import JImagePreviewModal from '@comp/jero/modal/JImagePreviewModal.vue'
 
 const FILE_TYPE_ALL = 'all'
 const FILE_TYPE_IMG = 'image'
+const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
+const FILE_TYPE_PDF = 'pdf'
 
 // const uidGenerator = () => {
 //   return '-' + parseInt(Math.random() * 10000 + 1 + '', 10)
@@ -55,7 +64,7 @@ const Base64 = require('js-base64').Base64
 
 // 支持预览的文件类型
 const CAN_PREVIEW_FILE_TYPE = ['pdf', 'image']
-// 支持预览的文件后缀
+// 不支持预览的文件后缀
 const CAN_PREVIEW_FILE_SUFFIX = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'mp3', 'mp4', 'flv']
 
 export default {
@@ -67,8 +76,10 @@ export default {
       headers: {},
       fileList: [],
       newFileList: [],
+      image: false,
       uploadGoOn: true,
-      containerId: null
+      containerId: null,
+      imageUrl: null
     }
   },
   props: {
@@ -287,6 +298,8 @@ export default {
             }
             return file
           })
+        } else {
+          this.$message.error(info.file.response.message)
         }
         // this.$message.success(`${info.file.name} 上传成功!`);
       } else if (info.file.status === 'error') {
@@ -333,7 +346,7 @@ export default {
       const fileSuffix = file.name ? file.name.split('.')[file.name.split('.').length - 1] : ''
       const canPreview = fileType ? CAN_PREVIEW_FILE_TYPE.some(tt => fileType.indexOf(tt) !== -1) : CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix === tt)
       // 判断是否为可预览格式的文件
-      if (!canPreview) {
+      if (canPreview) {
         this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
           this.handleDownload(file)
         })
@@ -341,13 +354,18 @@ export default {
       }
       const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
       // 图片预览，使用自己添加的组件
-      if (fileType && fileType.indexOf(FILE_TYPE_IMG) !== -1) {
+      if (!canPreview && FILE_TYPE_IMGS.includes(fileSuffix)) {
-        this.$refs.imagePreviewModal.open(fileFullUrl)
+        this.imageUrl = getFileAccessHttpUrl(file.response.result.id)
+        // 获取viewer实例
+        const viewer = this.$el.querySelector('.image').$viewer
+        // 调用show方法进行显示预览图
+        viewer.show()
+        // this.$refs.imagePreviewModal.open(file)
         return
       }
       // pdf预览
-      if (fileType && fileType.indexOf('pdf') !== -1) {
+      if (!canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
-        const url = `/pdfjs/web/viewer.html?file=${encodeURIComponent(fileFullUrl)}`
+        const url = previewPdf(file.response.result.id)
         window.open(url)
         return
       }
@@ -356,10 +374,8 @@ export default {
       window.open(url)
     },
     handleDownload (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}`
+      downloadFile(`/sys/common/download/${file.response.result.id}`, file.name)
-        window.open(fileFullUrl)
-      }
     }
   },
   mounted () {

jero-web/src/utils/previewPdf.js

@@ -0,0 +1,14 @@
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import Vue from 'vue'
+
+const getToken = () => Vue.ls.get(ACCESS_TOKEN)
+
+// 预览pdf
+const previewPdf = (id) => {
+  const url = `${window._CONFIG.domianURL}/sys/common/download/${id}?type=view&token=${getToken()}`
+  return `${process.env.BASE_URL}pdfjs/web/viewer.html?file=` + encodeURIComponent(url) + '&.pdf'
+}
+
+export {
+  previewPdf
+}