update 上传组件增加下载全部按钮

src/api/manage.js

@@ -165,6 +165,26 @@ export function downloadFile(url, fileName, parameter) {
     downloadFileByA(data, fileName)
   })
 }
+
+/**
+ * post请求下载文件zip
+ * @param url 文件路径
+ * @param fileName 文件名
+ * @param parameter
+ * @returns {*}
+ */
+export function downloadFileZip(url, fileName, parameter) {
+  return axios({
+    url: url,
+    data: parameter,
+    method: 'post',
+    responseType: 'blob'
+  }).then((data) => {
+    // 调用a标签下载文件的方法
+    downloadFileByA(data, fileName)
+  })
+}
+
 /**
  * post下载文件
  * @param url 文件路径

src/components/jero/JUpload.vue

@@ -24,6 +24,9 @@
           <a-icon type="upload"/>
           {{ text }}
         </a-button>
+        <span v-if="downloadAll && fileList.length > 0" class="file-item-btn download-all-btn" @click.prevent.stop="myDownloadZip">
+          <a-icon type="download" />下载全部
+        </span>
       </template>
     </a-upload>
 <!--     :show-upload-list="showUploadList"-->
@@ -52,7 +55,7 @@
 
 import Vue from 'vue'
 import {ACCESS_TOKEN} from '@/store/mutation-types'
-import {getFileAccessHttpUrl, downloadFile} from '@/api/manage'
+import {getFileAccessHttpUrl, downloadFile, downloadFileZip} from '@/api/manage'
 import {getFileInfo} from '@/api/api'
 import {isExternalTerminal} from '../../utils/util'
 // eslint-disable-next-line no-undef
@@ -147,6 +150,22 @@ export default {
       type: Boolean,
       required: false,
       default: true
+    },
+    /**
+     * 是否显示下载全部按钮
+     **/
+    downloadAll: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * 下载的压缩包名称
+     **/
+    fileZipName: {
+      type: String,
+      required: false,
+      default: '附件.zip'
     }
   },
   watch: {
@@ -451,6 +470,17 @@ export default {
         // let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
         window.open(url)
       }
+    },
+    /**
+     * 多个文件下载压缩包
+     */
+    myDownloadZip() {
+      console.log('1111111', this.fileList)
+
+      const ids = this.fileList.map(item => item.response.result.id).join(',')
+      downloadFileZip(`sys/common/zipDownload`, this.fileZipName, {
+        ids
+      })
     }
   },
   mounted() {
@@ -474,6 +504,10 @@ export default {
     }
   }
 }
+.download-all-btn {
+  margin-left: 8px;
+  cursor: pointer;
+}
 // 新增的文件操作按钮的样式
 /deep/.file-list-html{
   position: absolute!important;