案例文件打包下载

stdiet-common/src/main/java/com/stdiet/common/utils/oss/AliyunOSSUtils.java

@@ -73,10 +73,10 @@ public class AliyunOSSUtils {
             //去尾
             String tail = oranName.substring(cutPoint);
             //返回正确的带路径的图片名称
-            return prefix + head + tail + "_" + uuid;
+            return prefix + head + uuid + "_" + tail;
         }
         //不存在 直接返回
-        return prefix + oranName + "_" + uuid;
+        return prefix + uuid + "_" + oranName;
     }
 
     /**

stdiet-ui/package.json

@@ -48,12 +48,13 @@
     "dayjs": "^1.9.1",
     "echarts": "4.7.0",
     "element-ui": "2.13.2",
-    "file-saver": "2.0.1",
+    "file-saver": "^2.0.5",
     "fuse.js": "3.4.4",
     "immer": "^8.0.1",
     "js-beautify": "1.10.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "3.0.0-rc.1",
+    "jszip": "^3.6.0",
     "lodash": "^4.17.20",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
@@ -65,6 +66,7 @@
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",
     "vue-qr": "^2.3.0",
+    "vue-resource": "^1.5.2",
     "vue-router": "3.0.2",
     "vue-scrollto": "^2.20.0",
     "vue-splitpane": "1.0.4",

stdiet-ui/src/components/FileDownload/MuchFileDown.vue

@@ -5,6 +5,7 @@
   <div class="app-container" style="height: 400px; overflow: auto">
     <div style="margin: -20px auto 15px auto">
       <el-button type="primary" @click="lazyShow = true" plain>滚动下拉预览</el-button>
+      <el-button type="primary" @click="downZipFile()" plain>打包下载</el-button>
     </div>
     <el-table v-loading="loading" :data="fileList">
       <el-table-column label="文件预览" align="center" prop="fileUrl">
@@ -61,6 +62,7 @@
 <script>
 import { downCaseFile } from "@/api/custom/customerCase";
 import AutoHideMessage from "@/components/AutoHideMessage";
+import { downSigleFile,downFileByZip } from "@/utils/downFileByZip";
 export default {
   name: "MuchFileDown",
   components: {
@@ -77,13 +79,18 @@ export default {
       //案例id
       caseId: null,
       //支持预览的文件类型
-      imgArr: ['jpg', 'jpeg', 'png', 'gif'],
+      imgArr: ['jpg', 'jpeg', 'png'],
       //文件列表
       fileList: [],
       //图片文件列表
       imageList:[],
+      //全部文件列表
+      fileUrlList:[],
+      //全部文件名称列表
+      fileNameList:[],
       //懒加载
-      lazyShow: false
+      lazyShow: false,
+      titlePrefix: "",
     };
   },
   created() {
@@ -92,14 +99,16 @@ export default {
   computed: {
   },
   methods: {
-    showDialog(title, fileList) {
+    showDialog(titlePrefix, fileList) {
-      this.title = title ? title : "文件列表";
+      this.title = titlePrefix ? ("「"+titlePrefix+"」文件") : "文件列表";
+      this.titlePrefix = titlePrefix ? titlePrefix : "文件列表";
       fileList.forEach((item, index) => {
         item["imageFlag"] = this.isImage(item.fileName);
         if(item["imageFlag"]){
-           //this.$set(this.imageList, this.imageList.length, item.downUrl)
            this.imageList.push(item.downUrl);
         }
+        this.fileUrlList.push(item.downUrl);
+        this.fileNameList.push(item.fileName);
       });
       this.fileList = fileList;
       this.loading = false;
@@ -111,13 +120,16 @@ export default {
       this.caseId = null;
       this.fileList = [];
       this.imageList = [];
+      this.fileUrlList = [];
+      this.fileNameList = [];
+      this.titlePrefix = "";
     },
     downloadFile(file){
       if(file == undefined || file == null || file.downUrl == null || file.downUrl == ""){
         this.$message({message: "文件不存在", type: "warning",});
         return;
       }
-      downCaseFile(file.downUrl);
+      downSigleFile(file.downUrl, file.fileName);
     },
     isImage(name){
       var idx = name.indexOf('.');
@@ -126,6 +138,18 @@ export default {
       }
       var type = name.substr(idx + 1);
       return this.imgArr.indexOf(type) !== -1 ? true : false;
+    },
+    downZipFile(){
+      downFileByZip(this.fileUrlList, this.fileNameList, this.titlePrefix);
+    },
+    //判断是否为Trident内核浏览器(IE等)函数
+    browserIsIe: function () {
+      if (!!window.ActiveXObject || "ActiveXObject" in window) {
+        return true;
+      }
+      else {
+        return false;
+      }
     }
   },
 };

stdiet-ui/src/components/FileUpload/DragUploadEdit.vue

@@ -65,13 +65,13 @@ export default {
     };
   },
   methods: {
-    uploadFile(){
+    async uploadFile(){
       if(this.upload.fileList.length > 0 && this.uploadResult.fileUrl.length < this.upload.fileList.length){
         this.$refs.upload.submit();
       }else{
         //合并旧文件
         if(this.oldCaseFileList != null && this.oldCaseFileList.length > 0){
-          this.oldCaseFileList.forEach((item, index) => {
+          await this.oldCaseFileList.forEach((item, index) => {
             this.uploadResult.fileUrl.unshift(item.fileUrl);
             this.uploadResult.fileName.unshift(item.fileName);
           });
@@ -117,14 +117,14 @@ export default {
       //this.upload.isUploading = true;
     },
     // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
+    async handleFileSuccess(response, file, fileList) {
       if(response != null && response.code === 200){
         this.uploadResult.fileUrl.push(response.fileUrl);
         this.uploadResult.fileName.push(response.fileName);
         if(this.uploadResult.fileUrl.length === this.upload.fileList.length){
           //文件全部上传成功，则调用回调方法
           if(this.oldCaseFileList != null && this.oldCaseFileList.length > 0){
-            this.oldCaseFileList.forEach((item, index) => {
+            await this.oldCaseFileList.forEach((item, index) => {
               this.uploadResult.fileUrl.unshift(item.fileUrl);
               this.uploadResult.fileName.unshift(item.fileName);
             });

stdiet-ui/src/main.js

@@ -18,6 +18,7 @@ import "./permission"; // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
 import VueScrollTo from "vue-scrollto";
+import VueResource from "vue-resource"
 
 import {
   addDateRange,
@@ -104,6 +105,8 @@ Vue.use(VueScrollTo, {
   y: true
 });
 
+Vue.use(VueResource)
+
 new Vue({
   el: "#app",
   router,

stdiet-ui/src/utils/downFileByZip.js

@@ -0,0 +1,155 @@
+/*
+ * OSS文件打包批量下载
+ */
+import JSZip from "jszip";
+import FileSaver from "file-saver";
+import Vue from 'vue'
+
+const imageTypeArray = ['jpg', 'jpeg', 'png'];
+
+/**
+ * 打包下载
+ * @param fileUrlArray OSS访问URL数组
+ * @param fileNameArray 文件名称数组
+ * @param zipName 打包文件名
+ */
+export function downFileByZip(fileUrlArray, fileNameArray, zipName) {
+  try {
+    let zip = new JSZip();
+    for (let i = 0; i < fileUrlArray.length; i++) {
+      let fileType = getFileType(fileNameArray[i]);
+      if(imageTypeArray.indexOf(fileType) != -1){
+        getBase64Image(fileUrlArray[i], fileType, true).then(res => {
+          zip.file(fileNameArray[i], res, { base64: true });
+          if(i == fileUrlArray.length -1){
+            downZip(zip, zipName);
+          }
+        });
+      }else{
+        getFile(fileUrlArray[i]).then(arraybuffer => {
+          zip.file(fileNameArray[i], arraybuffer, { binary: true });
+          if(i == fileUrlArray.length -1){
+            downZip(zip, zipName);
+          }
+        });
+      }
+    }
+  } catch (err) {
+    console.log("err", err);
+  }
+}
+
+//根据访问链接获取文件类型
+export function getFileType(fileUrl){
+   let fileType = "";
+   let index = fileUrl.lastIndexOf(".");
+   if(index == -1){
+      return fileType;
+   }
+   fileType = fileUrl.substring(index+1);
+   if(fileType.indexOf("?") != -1){
+     fileType = fileType.substring(0,fileType.indexOf("?"));
+   }
+   return fileType;
+}
+
+export function downZip(zip, zipName) {
+  zip.generateAsync({
+      type: "blob"
+    }).then(content => {
+      FileSaver.saveAs(content, zipName+".zip");
+    });
+}
+
+//****传入图片链接，返回base64数据
+export function  getBase64Image(url, type, flag) {
+  return new Promise((resolve, reject) => {
+    var base64 = "";
+    var img = new Image();
+    img.setAttribute("crossOrigin", "Anonymous");
+    img.onload = () => {
+      base64 = image2Base64(img, type);
+      resolve(flag ? (base64.split(",")[1]) : base64);
+    };
+    img.onerror = () => reject("加载失败");
+    // 这里可能会有跨域失败的问题，解决方案同上，url + 随机数
+    img.src = url + "&t=" + Math.random();
+});
+}
+
+export function image2Base64(img, type) {
+  var canvas = document.createElement("canvas");
+  canvas.width = img.width;
+  canvas.height = img.height;
+  var ctx = canvas.getContext("2d");
+  ctx.drawImage(img, 0, 0, img.width, img.height);
+  var dataURL = canvas.toDataURL("image/"+type);
+  return dataURL;
+}
+
+//****传入文件链接，返回arraybuffer数据
+export function getFile(url) {
+  return new Promise((resolve, reject) => {
+    // 这里的$http是Vue里的axios
+    Vue.http({
+      method: "get",
+      url,
+      responseType: "arraybuffer"
+    }).then(data => {
+      resolve(data.data);
+    }).catch(error => {
+      reject("文件加载失败：" + error);
+    });
+  });
+}
+
+/**
+ * 下载单个文件
+ * @param fileUrl
+ * @param fileName
+ */
+export function downSigleFile(fileUrl, fileName){
+  let fileType = getFileType(fileName);
+  let blobData = null;
+  if(imageTypeArray.indexOf(fileType) != -1){
+      getBase64Image(fileUrl, fileType, false).then(res => {
+        blobData = base64ToBlob(res);
+        downFileByBlob(blobData,fileName);
+      });
+  }else{
+    getFile(fileUrl).then(arraybuffer => {
+      blobData = new Blob([arraybuffer]);
+      downFileByBlob(blobData,fileName);
+    });
+  }
+
+}
+
+/**
+ * blob对象下载
+ */
+export function downFileByBlob(blobData, fileName){
+  let url = window.URL.createObjectURL(blobData);
+  let link = document.createElement('a')
+  link.style.display = 'none'
+  link.href = url;
+  link.setAttribute('download', fileName);
+  document.body.appendChild(link);
+  link.click();
+}
+
+/**
+ * base64转blob对象
+  */
+export function base64ToBlob(base64) {
+  console.log(base64);
+  var parts = base64.split(";base64,");
+  var contentType = parts[0].split(":")[1];
+  var raw = window.atob(parts[1]);
+  var rawLength = raw.length;
+  var uInt8Array = new Uint8Array(rawLength);
+  for (var i = 0; i < rawLength; i++) {
+    uInt8Array[i] = raw.charCodeAt(i);
+  }
+  return new Blob([uInt8Array], { type: contentType });
+}

stdiet-ui/src/views/custom/customerCase/index.vue

@@ -390,7 +390,7 @@
       getFileListByCaseId(customerCase){
         getFileListByCaseId(customerCase.id).then(response => {
           if (response.code === 200) {
-              this.$refs["muchFileDownRef"].showDialog(null, response.rows);
+              this.$refs["muchFileDownRef"].showDialog(customerCase.name, response.rows);
           }
         });
       },