文件上传,下载,预览

package.json

@@ -26,6 +26,7 @@
     "echarts": "^4.8.0",
     "element-resize-detector": "^1.2.1",
     "enquire.js": "^2.1.6",
+    "js-base64": "^3.7.2",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",

src/components/jeecg/JUpload.vue

@@ -23,6 +23,8 @@
       :returnUrl="returnUrl"
       :listType="complistType"
       @preview="handlePreview"
+      @download="handleDownload"
+      :showUploadList="{ showRemoveIcon: true, showDownloadIcon: true }"
       :class="{'uploadty-disabled':disabled}">
       <template>
         <div v-if="isImageComp">
@@ -63,7 +65,7 @@
     name: 'JUpload',
     data(){
       return {
-        uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
+        uploadAction:window._CONFIG['domianURL']+"/sys/upload/uploadMinio",
         headers:{},
         fileList: [],
         newFileList: [],
@@ -310,10 +312,17 @@
         if(this.fileType === FILE_TYPE_IMG){
           this.previewImage = file.url || file.thumbUrl;
           this.previewVisible = true;
-        }else{
-          location.href=file.url
+        }else if (file.url) {
+          // 此base地址可以配置到一个常量文件里
+          let base = "http://127.0.0.1:8012/onlinePreview?url="
+          let url = base+encodeURIComponent(this.$Base64.encode(file.url))
+          window.open(url, '_blank')
         }
       },
+      // 文件下载
+      handleDownload (file) {
+        location.href=file.url
+      },
       handleCancel(){
         this.previewVisible = false;
       },

src/main.js

@@ -7,6 +7,9 @@ import Storage from 'vue-ls'
 import router from './router'
 import store from './store/'
 import { VueAxios } from "@/utils/request"
+//main.js
+import { Base64 } from 'js-base64';
+Vue.prototype.$Base64 = Base64
 
 require('@jeecg/antd-online-mini')
 require('@jeecg/antd-online-mini/dist/OnlineForm.css')

src/mixins/JeecgListMixin.js

@@ -345,6 +345,7 @@ export const JeecgListMixin = {
     /* 文件下载 */
     // update--autor:lvdandan-----date:20200630------for：修改下载文件方法名uploadFile改为downloadFile------
     downloadFile(text){
+
       if(!text){
         this.$message.warning("未知的文件")
         return;
@@ -352,9 +353,23 @@ export const JeecgListMixin = {
       if(text.indexOf(",")>0){
         text = text.substring(0,text.indexOf(","))
       }
+
       let url = getFileAccessHttpUrl(text)
+      console.log(this.$Base64.encode(url))
       window.open(url);
     },
+    //文件预览
+    onlineFile(text){
+      if(!text){
+        this.$message.warning("未知的文件")
+        return;
+      }
+      if(text.indexOf(",")>0){
+        text = text.substring(0,text.indexOf(","))
+      }
+      let url = getFileAccessHttpUrl(text)
+      window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(this.$Base64.encode(url)));
+    },
   }
 
 }

src/views/processmaterials/ProcessUdgetPlanList.vue

@@ -82,6 +82,18 @@
           </a-button>
         </template>
 
+<!--        <template slot="fileOn" slot-scope="text">-->
+<!--          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>-->
+<!--          <a-button-->
+<!--            v-else-->
+<!--            :ghost="true"-->
+<!--            type="primary"-->
+<!--            size="small"-->
+<!--            @click="onlineFile(text)">-->
+<!--            预览-->
+<!--          </a-button>-->
+<!--        </template>-->
+
         <span slot="action" slot-scope="text, record">
           <a @click="handleEdit(record)">编辑</a>
 
@@ -106,7 +118,6 @@
         <ProcessUdgetPlanMaterialList :mainId="selectedMainId" />
       </a-tab-pane>
     </a-tabs>
-
     <processUdgetPlan-modal ref="modalForm" @ok="modalFormOk"></processUdgetPlan-modal>
   </a-card>
 </template>
@@ -186,6 +197,12 @@
             dataIndex: 'fileId',
             scopedSlots: {customRender: 'fileSlot'}
           },
+          // {
+          //   title:'文件预览',
+          //   align:"center",
+          //   dataIndex: 'fileId',
+          //   scopedSlots: {customRender: 'fileOn'}
+          // },
           {
             title: '操作',
             dataIndex: 'action',
@@ -308,11 +325,12 @@
         fieldList.push({type:'date',value:'needTime',text:'需求时间'})
         fieldList.push({type:'int',value:'orderNumber',text:'顺序号',dictCode:''})
         fieldList.push({type:'string',value:'fileId',text:'文件id',dictCode:''})
+        // fieldList.push({type:'string',value:'fileId',text:'文件预览',dictCode:'1'})
         this.superFieldList = fieldList
       }
     }
   }
 </script>
 <style scoped>
-  @import '~@assets/less/common.less'
+  @import '~@assets/less/common.less';
 </style>

src/views/processmaterials/modules/ProcessUdgetPlanForm.vue

@@ -76,7 +76,6 @@
   import { getAction } from '@/api/manage'
   import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
   import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
-  import { validateDuplicateValue } from '@/utils/util'
   import JFormContainer from '@/components/jeecg/JFormContainer'
   import JDate from '@/components/jeecg/JDate'
   import JUpload from '@/components/jeecg/JUpload'
@@ -386,7 +385,6 @@
       },
       /** 整理成formData */
       classifyIntoFormData(allValues) {
-        alert(JSON.stringify(allValues))
         let main = Object.assign(this.model, allValues.formValue)
         return {
           ...main, // 展开

yarn.lock

@@ -6747,6 +6747,11 @@ js-base64@^2.1.9:
   resolved "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz#313b6274dda718f714d00b3330bbae6e38e90209"
   integrity sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==
 
+js-base64@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.2.tgz#816d11d81a8aff241603d19ce5761e13e41d7745"
+  integrity sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ==
+
 js-cookie@^2.2.0:
   version "2.2.1"
   resolved "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
@@ -10028,8 +10033,8 @@ set-value@^2.0.0, set-value@^2.0.1:
 
 setimmediate@^1.0.4:
   version "1.0.5"
-  resolved "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
+  resolved "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
 
 setprototypeof@1.1.0:
   version "1.1.0"