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锛屽垯鍙繚鐣� 鏈�鍚巗ize涓瓧绗︺��
+ *
+ * @param num 鏁板瓧瀵硅薄
+ * @param size 瀛楃涓叉寚瀹氶暱搴�
+ * @return 杩斿洖鏁板瓧鐨勫瓧绗︿覆鏍煎紡锛岃瀛楃涓蹭负鎸囧畾闀垮害銆�
+ */
+ public static final String padl(final Number num, final int size)
+ {
+ return padl(num.toString(), size, '0');
+ }
+
+ /**
+ * 瀛楃涓插乏琛ラ綈銆傚鏋滃師濮嬪瓧绗︿覆s闀垮害澶т簬size锛屽垯鍙繚鐣欐渶鍚巗ize涓瓧绗︺��
+ *
+ * @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宸﹁ˉ榻恖ength浣嶆暟
+ *
+ * @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("姝e湪涓婁紶鏂囦欢锛岃绋嶅��...");
+ 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();
}
},
// 涓婁紶鍓峫oading鍔犺浇
@@ -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("姝e湪涓婁紶鍥剧墖锛岃绋嶅��...");
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.3