作者 RuoYi

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

@@ -4,7 +4,9 @@ @@ -4,7 +4,9 @@
4 :action="uploadFileUrl" 4 :action="uploadFileUrl"
5 :before-upload="handleBeforeUpload" 5 :before-upload="handleBeforeUpload"
6 :file-list="fileList" 6 :file-list="fileList"
  7 + :limit="limit"
7 :on-error="handleUploadError" 8 :on-error="handleUploadError"
  9 + :on-exceed="handleExceed"
8 :on-success="handleUploadSuccess" 10 :on-success="handleUploadSuccess"
9 :show-file-list="false" 11 :show-file-list="false"
10 :headers="headers" 12 :headers="headers"
@@ -44,6 +46,11 @@ export default { @@ -44,6 +46,11 @@ export default {
44 props: { 46 props: {
45 // 值 47 // 值
46 value: [String, Object, Array], 48 value: [String, Object, Array],
  49 + // 数量限制
  50 + limit: {
  51 + type: Number,
  52 + default: 5,
  53 + },
47 // 大小限制(MB) 54 // 大小限制(MB)
48 fileSize: { 55 fileSize: {
49 type: Number, 56 type: Number,
@@ -129,6 +136,10 @@ export default { @@ -129,6 +136,10 @@ export default {
129 } 136 }
130 return true; 137 return true;
131 }, 138 },
  139 + // 文件个数超出
  140 + handleExceed() {
  141 + this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
  142 + },
132 // 上传失败 143 // 上传失败
133 handleUploadError(err) { 144 handleUploadError(err) {
134 this.$message.error("上传失败, 请重试"); 145 this.$message.error("上传失败, 请重试");