From e447fb806b66adb1150773582ca7c54dd9d09c4f Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期四, 08 七月 2021 12:36:02 +0800
Subject: [PATCH] FileUpload组件支持多文件上传

---
 ruoyi-ui/src/components/FileUpload/index.vue |   73 ++++++++++++++++++++----------------
 1 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue
index d19a012..649e077 100644
--- a/ruoyi-ui/src/components/FileUpload/index.vue
+++ b/ruoyi-ui/src/components/FileUpload/index.vue
@@ -4,9 +4,7 @@
       :action="uploadFileUrl"
       :before-upload="handleBeforeUpload"
       :file-list="fileList"
-      :limit="1"
       :on-error="handleUploadError"
-      :on-exceed="handleExceed"
       :on-success="handleUploadSuccess"
       :show-file-list="false"
       :headers="headers"
@@ -26,8 +24,8 @@
 
     <!-- 鏂囦欢鍒楄〃 -->
     <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
-      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
-        <el-link :href="file.url" :underline="false" target="_blank">
+      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
@@ -42,6 +40,7 @@
 import { getToken } from "@/utils/auth";
 
 export default {
+  name: "FileUpload",
   props: {
     // 鍊�
     value: [String, Object, Array],
@@ -63,6 +62,7 @@
   },
   data() {
     return {
+      baseUrl: process.env.VUE_APP_BASE_API,
       uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
       headers: {
         Authorization: "Bearer " + getToken(),
@@ -70,29 +70,34 @@
       fileList: [],
     };
   },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          let temp = 1;
+          // 棣栧厛灏嗗�艰浆涓烘暟缁�
+          const list = Array.isArray(val) ? val : this.value.split(',');
+          // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁�
+          this.fileList = list.map(item => {
+            if (typeof item === "string") {
+              item = { name: item, url: item };
+            }
+            item.uid = item.uid || new Date().getTime() + temp++;
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
   computed: {
     // 鏄惁鏄剧ず鎻愮ず
     showTip() {
       return this.isShowTip && (this.fileType || this.fileSize);
-    },
-    // 鍒楄〃
-    list() {
-      let temp = 1;
-      if (this.value) {
-        // 棣栧厛灏嗗�艰浆涓烘暟缁�
-        const list = Array.isArray(this.value) ? this.value : [this.value];
-        // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁�
-        return list.map((item) => {
-          if (typeof item === "string") {
-            item = { name: item, url: item };
-          }
-          item.uid = item.uid || new Date().getTime() + temp++;
-          return item;
-        });
-      } else {
-        this.fileList = [];
-        return [];
-      }
     },
   },
   methods: {
@@ -124,10 +129,6 @@
       }
       return true;
     },
-    // 鏂囦欢涓暟瓒呭嚭
-    handleExceed() {
-      this.$message.error(`鍙厑璁镐笂浼犲崟涓枃浠禶);
-    },
     // 涓婁紶澶辫触
     handleUploadError(err) {
       this.$message.error("涓婁紶澶辫触, 璇烽噸璇�");
@@ -135,12 +136,13 @@
     // 涓婁紶鎴愬姛鍥炶皟
     handleUploadSuccess(res, file) {
       this.$message.success("涓婁紶鎴愬姛");
-      this.$emit("input", res.url);
+      this.fileList.push({ name: res.fileName, url: res.fileName });
+      this.$emit("input", this.listToString(this.fileList));
     },
     // 鍒犻櫎鏂囦欢
     handleDelete(index) {
       this.fileList.splice(index, 1);
-      this.$emit("input", '');
+      this.$emit("input", this.listToString(this.fileList));
     },
     // 鑾峰彇鏂囦欢鍚嶇О
     getFileName(name) {
@@ -149,11 +151,16 @@
       } else {
         return "";
       }
+    },
+    // 瀵硅薄杞垚鍒嗛殧瀛楃涓�
+    listToString(list) {
+      let files = "";
+      for (let key in list) {
+        files += list[key].url + ",";
+      }
+      return files.substr(0, files.length - 1);
     }
-  },
-  created() {
-    this.fileList = this.list;
-  },
+  }
 };
 </script>
 

--
Gitblit v1.9.3