[update] 文件上传组件-文件预览的优化

src/components/jero/JUpload.vue

@@ -21,7 +21,8 @@
           <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>
@@ -34,11 +35,12 @@
 import {ACCESS_TOKEN} from '@/store/mutation-types'
 import {getFileAccessHttpUrl} from '@/api/manage'
 import {getFileInfo} from '@/api/api'
+
 const Base64 = require('js-base64').Base64
 
 const FILE_TYPE_ALL = 'all'
 const FILE_TYPE_IMG = 'image'
-  const FILE_TYPE_TXT = 'file'
+// const FILE_TYPE_TXT = 'file'
 const uidGenerator = () => {
   return '-' + parseInt(Math.random() * 10000 + 1, 10)
 }
@@ -138,7 +140,7 @@
   computed: {
     //透传给下级组件的事件，需要排除本组件使用的change事件
     childListeners() {
-        const vm = this
+      // const vm = this
       let result = Object.assign({},
         this.$listeners,
       )
@@ -161,11 +163,11 @@
   },
   methods: {
     initFileListArr(val) {
-        if(!val || val.length==0){
+      if (!val || val.length === 0) {
         this.fileList = []
         return
       }
-        for(var a=0;a<val.length;a++){
+      for (let a = 0; a < val.length; a++) {
         this.fileList.forEach((item) => {
           if (item.url === val[a]) {
             item.uid = uidGenerator()
@@ -192,34 +194,41 @@
       const fileList = []
       for (let a = 0; a < arr.length; a++) {
         // 获取每一个文件的信息，组成fileList
+        // 突然想判断现在的fileList 中是否是历史的信息，如果是的话则先进行匹配
+        let isHistory = this.fileList.find(file => file.response.status === 'history' && (file.response.result || {}).id === arr[a])
+        console.log("isHistory===", isHistory)
+        if (isHistory) {
+          fileList.push(isHistory)
+        } else {
           const fileObj = await this.getFileInfo(arr[a])
           const url = getFileAccessHttpUrl(arr[a])
           fileList.push({
             uid: uidGenerator(),
-            name: fileObj.fileName,
+            name: (fileObj || {}).fileName,
             status: 'done',
             url: url,
             response: {
               status: 'history',
-              message: arr[a]
+              message: arr[a],
+              result: fileObj
             }
           })
         }
+      }
       this.fileList = [...fileList]
-
     },
     handlePathChange() {
       let uploadFiles = this.fileList
       let path = ''
       // 文件id
       let fileIds = ''
-        if(!uploadFiles || uploadFiles.length==0){
+      if (!uploadFiles || uploadFiles.length === 0) {
         path = ''
       }
       let arr = []
       // 如果returnid为true 只返回id
       if (this.returnId) {
-          for(var a=0;a<uploadFiles.length;a++){
+        for (let a = 0; a < uploadFiles.length; a++) {
           if (uploadFiles[a].status === 'done') {
             arr.push(uploadFiles[a].response.result.id)
           } else {
@@ -233,7 +242,7 @@
         return
       }
 
-        for(var a=0;a<uploadFiles.length;a++){
+      for (let a = 0; a < uploadFiles.length; a++) {
         if (uploadFiles[a].status === 'done') {
           arr.push(uploadFiles[a].url)
         } else {
@@ -247,7 +256,7 @@
     },
     beforeUpload(file) {
       this.uploadGoOn = true
-        var fileType = file.type
+      let fileType = file.type
       if (this.fileType === FILE_TYPE_IMG) {
         if (fileType.indexOf('image') < 0) {
           this.$message.warning('请上传图片')
@@ -290,10 +299,10 @@
         } else {
           //returnUrl为false时返回文件名称、文件路径及文件大小
           this.newFileList = []
-            for(var a=0;a<fileList.length;a++){
+          for (let a = 0; a < fileList.length; a++) {
             // update-begin-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
             if (fileList[a].status === 'done') {
-                var fileJson = {
+              let fileJson = {
                 fileName: fileList[a].name,
                 filePath: fileList[a].url,
                 fileSize: fileList[a].size
@@ -314,9 +323,9 @@
     },
     handlePreview(file) {
       if (file && file.url) {
-          var fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
+        const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.response.result.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(Base64.encode(fileFullUrl))}`
-          let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
+        // let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
         window.open(url)
       }
     },
@@ -340,7 +349,8 @@
       })
     }
   },
-    mounted(){},
+  mounted() {
+  },
   model: {
     prop: 'value',
     event: 'change'
@@ -354,6 +364,7 @@
     .anticon-close {
       display: none;
     }
+
     .anticon-delete {
       display: none;
     }

vue.config.js

@@ -76,7 +76,7 @@ module.exports = {
   },
 
   devServer: {
-    port: 3000,
+    port: 21825,
     proxy: {
       /* '/api': {
         target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统
@@ -88,7 +88,7 @@ module.exports = {
       },*/
       '/jero-boot': {
         // ''
-        target: 'http://localhost:8080', //请求本地 jero-boot后台项目
+        target: 'http://localhost:21824', //请求本地 jero-boot后台项目
         ws: false,
         changeOrigin: true,
       },