From 927b05713a25340f3ba3a58bdd42ca2129060c4a Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期五, 25 二月 2022 11:51:29 +0800
Subject: [PATCH] 组件fileUpload支持多文件同时选择上传
---
ruoyi-common/src/main/java/com/ruoyi/common/utils/StringUtils.java | 49 ++++++++++++
ruoyi-common/src/main/java/com/ruoyi/common/utils/uuid/Seq.java | 86 +++++++++++++++++++++
ruoyi-ui/src/components/FileUpload/index.vue | 29 +++++--
ruoyi-ui/src/components/ImageUpload/index.vue | 23 +----
ruoyi-ui/src/views/system/user/index.vue | 2
ruoyi-common/src/main/java/com/ruoyi/common/utils/file/FileUploadUtils.java | 5
6 files changed, 166 insertions(+), 28 deletions(-)
diff --git a/ruoyi-common/src/main/java/com/ruoyi/common/utils/StringUtils.java b/ruoyi-common/src/main/java/com/ruoyi/common/utils/StringUtils.java
index 8df5617..6765117 100644
--- a/ruoyi-common/src/main/java/com/ruoyi/common/utils/StringUtils.java
+++ b/ruoyi-common/src/main/java/com/ruoyi/common/utils/StringUtils.java
@@ -531,4 +531,53 @@
{
return (T) obj;
}
+
+ /**
+ * 数字左边补齐0，使之达到指定长度。注意，如果数字转换为字符串后，长度大于size，则只保留 最后size个字符。
+ *
+ * @param num 数字对象
+ * @param size 字符串指定长度
+ * @return 返回数字的字符串格式，该字符串为指定长度。
+ */
+ public static final String padl(final Number num, final int size)
+ {
+ return padl(num.toString(), size, '0');
+ }
+
+ /**
+ * 字符串左补齐。如果原始字符串s长度大于size，则只保留最后size个字符。
+ *
+ * @param s 原始字符串
+ * @param size 字符串指定长度
+ * @param c 用于补齐的字符
+ * @return 返回指定长度的字符串，由原字符串左补齐或截取得到。
+ */
+ public static final String padl(final String s, final int size, final char c)
+ {
+ final StringBuilder sb = new StringBuilder(size);
+ if (s != null)
+ {
+ final int len = s.length();
+ if (s.length() <= size)
+ {
+ for (int i = size - len; i > 0; i--)
+ {
+ sb.append(c);
+ }
+ sb.append(s);
+ }
+ else
+ {
+ return s.substring(len - size, len);
+ }
+ }
+ else
+ {
+ for (int i = size; i > 0; i--)
+ {
+ sb.append(c);
+ }
+ }
+ return sb.toString();
+ }
}
\ No newline at end of file
diff --git a/ruoyi-common/src/main/java/com/ruoyi/common/utils/file/FileUploadUtils.java b/ruoyi-common/src/main/java/com/ruoyi/common/utils/file/FileUploadUtils.java
index 1a89dd9..cc3fd26 100644
--- a/ruoyi-common/src/main/java/com/ruoyi/common/utils/file/FileUploadUtils.java
+++ b/ruoyi-common/src/main/java/com/ruoyi/common/utils/file/FileUploadUtils.java
@@ -12,7 +12,7 @@
import com.ruoyi.common.exception.file.InvalidExtensionException;
import com.ruoyi.common.utils.DateUtils;
import com.ruoyi.common.utils.StringUtils;
-import com.ruoyi.common.utils.uuid.IdUtils;
+import com.ruoyi.common.utils.uuid.Seq;
/**
* 文件上传工具类
@@ -121,7 +121,8 @@
*/
public static final String extractFilename(MultipartFile file)
{
- return DateUtils.datePath() + "/" + IdUtils.fastUUID() + "." + getExtension(file);
+ return StringUtils.format("{}/{}_{}.{}", DateUtils.datePath(),
+ FilenameUtils.getBaseName(file.getOriginalFilename()), Seq.getId(Seq.uploadSeqType), getExtension(file));
}
public static final File getAbsoluteFile(String uploadDir, String fileName) throws IOException
diff --git a/ruoyi-common/src/main/java/com/ruoyi/common/utils/uuid/Seq.java b/ruoyi-common/src/main/java/com/ruoyi/common/utils/uuid/Seq.java
new file mode 100644
index 0000000..fd88245
--- /dev/null
+++ b/ruoyi-common/src/main/java/com/ruoyi/common/utils/uuid/Seq.java
@@ -0,0 +1,86 @@
+package com.ruoyi.common.utils.uuid;
+
+import java.util.concurrent.atomic.AtomicInteger;
+import com.ruoyi.common.utils.DateUtils;
+import com.ruoyi.common.utils.StringUtils;
+
+/**
+ * @author ruoyi 序列生成类
+ */
+public class Seq
+{
+ // 通用序列类型
+ public static final String commSeqType = "COMMON";
+
+ // 上传序列类型
+ public static final String uploadSeqType = "UPLOAD";
+
+ // 通用接口序列数
+ private static AtomicInteger commSeq = new AtomicInteger(1);
+
+ // 上传接口序列数
+ private static AtomicInteger uploadSeq = new AtomicInteger(1);
+
+ // 机器标识
+ private static String machineCode = "A";
+
+ /**
+ * 获取通用序列号
+ *
+ * @return 序列值
+ */
+ public static String getId()
+ {
+ return getId(commSeqType);
+ }
+
+ /**
+ * 默认16位序列号 yyMMddHHmmss + 一位机器标识 + 3长度循环递增字符串
+ *
+ * @return 序列值
+ */
+ public static String getId(String type)
+ {
+ AtomicInteger atomicInt = commSeq;
+ if (uploadSeqType.equals(type))
+ {
+ atomicInt = uploadSeq;
+ }
+ return getId(atomicInt, 3);
+ }
+
+ /**
+ * 通用接口序列号 yyMMddHHmmss + 一位机器标识 + length长度循环递增字符串
+ *
+ * @param atomicInt 序列数
+ * @param length 数值长度
+ * @return 序列值
+ */
+ public static String getId(AtomicInteger atomicInt, int length)
+ {
+ String result = DateUtils.dateTimeNow();
+ result += machineCode;
+ result += getSeq(atomicInt, length);
+ return result;
+ }
+
+ /**
+ * 序列循环递增字符串[1, 10 的 (length)幂次方), 用0左补齐length位数
+ *
+ * @return 序列值
+ */
+ private synchronized static String getSeq(AtomicInteger atomicInt, int length)
+ {
+ // 先取值再+1
+ int value = atomicInt.getAndIncrement();
+
+ // 如果更新后值>=10 的 (length)幂次方则重置为1
+ int maxSeq = (int) Math.pow(10, length);
+ if (atomicInt.get() >= maxSeq)
+ {
+ atomicInt.set(1);
+ }
+ // 转字符串，用0左补齐
+ return StringUtils.padl(value, length);
+ }
+}
diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue
index ea15a57..aa2296b 100644
--- a/ruoyi-ui/src/components/FileUpload/index.vue
+++ b/ruoyi-ui/src/components/FileUpload/index.vue
@@ -1,6 +1,7 @@
<template>
<div class="upload-file">
<el-upload
+ multiple
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
@@ -69,6 +70,8 @@
},
data() {
return {
+ number: 0,
+ uploadList: [],
baseUrl: process.env.VUE_APP_BASE_API,
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
headers: {
@@ -122,7 +125,7 @@
return false;
});
if (!isTypeOk) {
- this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
+ this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
return false;
}
}
@@ -130,25 +133,33 @@
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
- this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
+ this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false;
}
}
+ this.$modal.loading("正在上传文件，请稍候...");
+ this.number++;
return true;
},
// 文件个数超出
handleExceed() {
- this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
+ this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
},
// 上传失败
handleUploadError(err) {
- this.$message.error("上传失败, 请重试");
+ this.$modal.msgError("上传图片失败，请重试");
+ this.$modal.closeLoading()
},
// 上传成功回调
- handleUploadSuccess(res, file) {
- this.$message.success("上传成功");
- this.fileList.push({ name: res.fileName, url: res.fileName });
- this.$emit("input", this.listToString(this.fileList));
+ handleUploadSuccess(res) {
+ this.uploadList.push({ name: res.fileName, url: res.fileName });
+ if (this.uploadList.length === this.number) {
+ this.fileList = this.fileList.concat(this.uploadList);
+ this.uploadList = [];
+ this.number = 0;
+ this.$emit("input", this.listToString(this.fileList));
+ this.$modal.closeLoading();
+ }
},
// 删除文件
handleDelete(index) {
@@ -158,7 +169,7 @@
// 获取文件名称
getFileName(name) {
if (name.lastIndexOf("/") > -1) {
- return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
+ return name.slice(name.lastIndexOf("/") + 1);
} else {
return "";
}
diff --git a/ruoyi-ui/src/components/ImageUpload/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue
index bf04c5b..71172c1 100644
--- a/ruoyi-ui/src/components/ImageUpload/index.vue
+++ b/ruoyi-ui/src/components/ImageUpload/index.vue
@@ -133,7 +133,7 @@
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
- this.loading.close();
+ this.$modal.closeLoading();
}
},
// 上传前loading加载
@@ -154,36 +154,27 @@
}
if (!isImg) {
- this.$message.error(
- `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
- );
+ this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
return false;
}
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
- this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+ this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
return false;
}
}
- this.loading = this.$loading({
- lock: true,
- text: "上传中",
- background: "rgba(0, 0, 0, 0.7)",
- });
+ this.$modal.loading("正在上传图片，请稍候...");
this.number++;
},
// 文件个数超出
handleExceed() {
- this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
+ this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
},
// 上传失败
handleUploadError() {
- this.$message({
- type: "error",
- message: "上传失败",
- });
- this.loading.close();
+ this.$modal.msgError("上传图片失败，请重试");
+ this.$modal.closeLoading();
},
// 预览
handlePictureCardPreview(file) {
diff --git a/ruoyi-ui/src/views/system/user/index.vue b/ruoyi-ui/src/views/system/user/index.vue
index ea1fd45..58de56f 100644
--- a/ruoyi-ui/src/views/system/user/index.vue
+++ b/ruoyi-ui/src/views/system/user/index.vue
@@ -443,7 +443,7 @@
email: [
{
type: "email",
- message: "'请输入正确的邮箱地址",
+ message: "请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
--
Gitblit v1.9.2