FileUpload组件支持多文件上传

ruoyi-ui/src/components/FileUpload/index.vue

@@ -4,7 +4,7 @@
       :action="uploadFileUrl"
       :before-upload="handleBeforeUpload"
       :file-list="fileList"
-      :limit="1"
+      :limit="limit"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
       :on-success="handleUploadSuccess"
@@ -26,7 +26,7 @@
 
     <!-- 文件列表 -->
     <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">
+      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
         <el-link :href="file.url" :underline="false" target="_blank">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
         </el-link>
@@ -42,9 +42,15 @@
 import { getToken } from "@/utils/auth";
 
 export default {
+  name: "FileUpload",
   props: {
     // 值
     value: [String, Object, Array],
+    // 数量限制
+    limit: {
+      type: Number,
+      default: 5,
+    },
     // 大小限制(MB)
     fileSize: {
       type: Number,
@@ -70,30 +76,35 @@ export default {
       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: {
     // 上传前校检格式和大小
@@ -126,7 +137,7 @@ export default {
     },
     // 文件个数超出
     handleExceed() {
-      this.$message.error(`只允许上传单个文件`);
+      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
     },
     // 上传失败
     handleUploadError(err) {
@@ -135,12 +146,13 @@ export default {
     // 上传成功回调
     handleUploadSuccess(res, file) {
       this.$message.success("上传成功");
-      this.$emit("input", res.data.url);
+      this.fileList.push({ name: res.data.url, url: res.data.url });
+      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 +161,17 @@ export default {
       } else {
         return "";
       }
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].url + separator;
+      }
+      return strs != '' ? strs.substr(0, strs.length - 1) : '';
     }
-  },
+  }
-  created() {
-    this.fileList = this.list;
-  },
 };
 </script>