瀏覽代碼

文件上传组件添加数量限制属性

RuoYi 3 年之前
父節點
當前提交
e259093e01
共有 1 個文件被更改,包括 11 次插入0 次删除
  1. 11 0
      ruoyi-ui/src/components/FileUpload/index.vue

+ 11 - 0
ruoyi-ui/src/components/FileUpload/index.vue

@@ -4,7 +4,9 @@
       :action="uploadFileUrl"
       :before-upload="handleBeforeUpload"
       :file-list="fileList"
+      :limit="limit"
       :on-error="handleUploadError"
+      :on-exceed="handleExceed"
       :on-success="handleUploadSuccess"
       :show-file-list="false"
       :headers="headers"
@@ -44,6 +46,11 @@ export default {
   props: {
     // 值
     value: [String, Object, Array],
+    // 数量限制
+    limit: {
+      type: Number,
+      default: 5,
+    },
     // 大小限制(MB)
     fileSize: {
       type: Number,
@@ -129,6 +136,10 @@ export default {
       }
       return true;
     },
+    // 文件个数超出
+    handleExceed() {
+      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
     // 上传失败
     handleUploadError(err) {
       this.$message.error("上传失败, 请重试");