Browse Source

组件fileUpload支持多文件同时选择上传

tags/v3.5.0
RuoYi 3 years ago
parent
commit
04706403d3
  1. 49
      ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/StringUtils.java
  2. 4
      ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/uuid/IdUtils.java
  3. 86
      ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/uuid/Seq.java
  4. 2
      ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/uuid/UUID.java
  5. 2
      ruoyi-common/ruoyi-common-security/src/main/java/com/ruoyi/common/security/service/TokenService.java
  6. 2
      ruoyi-gateway/src/main/java/com/ruoyi/gateway/service/impl/ValidateCodeServiceImpl.java
  7. 5
      ruoyi-modules/ruoyi-file/src/main/java/com/ruoyi/file/utils/FileUploadUtils.java
  8. 27
      ruoyi-ui/src/components/FileUpload/index.vue
  9. 23
      ruoyi-ui/src/components/ImageUpload/index.vue
  10. 2
      ruoyi-ui/src/views/system/user/index.vue

49
ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/StringUtils.java

@ -478,4 +478,53 @@ public class StringUtils extends org.apache.commons.lang3.StringUtils
{ {
return (T) obj; 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();
}
} }

4
ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/IdUtils.java → ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/uuid/IdUtils.java

@ -1,6 +1,4 @@
package com.ruoyi.common.core.utils; package com.ruoyi.common.core.utils.uuid;
import com.ruoyi.common.core.text.UUID;
/** /**
* ID生成器工具类 * ID生成器工具类

86
ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/uuid/Seq.java

@ -0,0 +1,86 @@
package com.ruoyi.common.core.utils.uuid;
import java.util.concurrent.atomic.AtomicInteger;
import com.ruoyi.common.core.utils.DateUtils;
import com.ruoyi.common.core.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);
}
}

2
ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/text/UUID.java → ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/uuid/UUID.java

@ -1,4 +1,4 @@
package com.ruoyi.common.core.text; package com.ruoyi.common.core.utils.uuid;
import java.security.MessageDigest; import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException; import java.security.NoSuchAlgorithmException;

2
ruoyi-common/ruoyi-common-security/src/main/java/com/ruoyi/common/security/service/TokenService.java

@ -8,11 +8,11 @@ import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component; import org.springframework.stereotype.Component;
import com.ruoyi.common.core.constant.CacheConstants; import com.ruoyi.common.core.constant.CacheConstants;
import com.ruoyi.common.core.constant.SecurityConstants; import com.ruoyi.common.core.constant.SecurityConstants;
import com.ruoyi.common.core.utils.IdUtils;
import com.ruoyi.common.core.utils.JwtUtils; import com.ruoyi.common.core.utils.JwtUtils;
import com.ruoyi.common.core.utils.ServletUtils; import com.ruoyi.common.core.utils.ServletUtils;
import com.ruoyi.common.core.utils.StringUtils; import com.ruoyi.common.core.utils.StringUtils;
import com.ruoyi.common.core.utils.ip.IpUtils; import com.ruoyi.common.core.utils.ip.IpUtils;
import com.ruoyi.common.core.utils.uuid.IdUtils;
import com.ruoyi.common.redis.service.RedisService; import com.ruoyi.common.redis.service.RedisService;
import com.ruoyi.common.security.utils.SecurityUtils; import com.ruoyi.common.security.utils.SecurityUtils;
import com.ruoyi.system.api.model.LoginUser; import com.ruoyi.system.api.model.LoginUser;

2
ruoyi-gateway/src/main/java/com/ruoyi/gateway/service/impl/ValidateCodeServiceImpl.java

@ -11,9 +11,9 @@ import org.springframework.util.FastByteArrayOutputStream;
import com.google.code.kaptcha.Producer; import com.google.code.kaptcha.Producer;
import com.ruoyi.common.core.constant.Constants; import com.ruoyi.common.core.constant.Constants;
import com.ruoyi.common.core.exception.CaptchaException; import com.ruoyi.common.core.exception.CaptchaException;
import com.ruoyi.common.core.utils.IdUtils;
import com.ruoyi.common.core.utils.StringUtils; import com.ruoyi.common.core.utils.StringUtils;
import com.ruoyi.common.core.utils.sign.Base64; import com.ruoyi.common.core.utils.sign.Base64;
import com.ruoyi.common.core.utils.uuid.IdUtils;
import com.ruoyi.common.core.web.domain.AjaxResult; import com.ruoyi.common.core.web.domain.AjaxResult;
import com.ruoyi.common.redis.service.RedisService; import com.ruoyi.common.redis.service.RedisService;
import com.ruoyi.gateway.config.properties.CaptchaProperties; import com.ruoyi.gateway.config.properties.CaptchaProperties;

5
ruoyi-modules/ruoyi-file/src/main/java/com/ruoyi/file/utils/FileUploadUtils.java

@ -9,9 +9,9 @@ import com.ruoyi.common.core.exception.file.FileNameLengthLimitExceededException
import com.ruoyi.common.core.exception.file.FileSizeLimitExceededException; import com.ruoyi.common.core.exception.file.FileSizeLimitExceededException;
import com.ruoyi.common.core.exception.file.InvalidExtensionException; import com.ruoyi.common.core.exception.file.InvalidExtensionException;
import com.ruoyi.common.core.utils.DateUtils; import com.ruoyi.common.core.utils.DateUtils;
import com.ruoyi.common.core.utils.IdUtils;
import com.ruoyi.common.core.utils.StringUtils; import com.ruoyi.common.core.utils.StringUtils;
import com.ruoyi.common.core.utils.file.MimeTypeUtils; import com.ruoyi.common.core.utils.file.MimeTypeUtils;
import com.ruoyi.common.core.utils.uuid.Seq;
/** /**
* 文件上传工具类 * 文件上传工具类
@ -86,7 +86,8 @@ public class FileUploadUtils
*/ */
public static final String extractFilename(MultipartFile file) 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));
} }
private static final File getAbsoluteFile(String uploadDir, String fileName) throws IOException private static final File getAbsoluteFile(String uploadDir, String fileName) throws IOException

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

@ -1,6 +1,7 @@
<template> <template>
<div class="upload-file"> <div class="upload-file">
<el-upload <el-upload
multiple
:action="uploadFileUrl" :action="uploadFileUrl"
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
:file-list="fileList" :file-list="fileList"
@ -69,6 +70,8 @@ export default {
}, },
data() { data() {
return { return {
number: 0,
uploadList: [],
uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", // uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", //
headers: { headers: {
Authorization: "Bearer " + getToken(), Authorization: "Bearer " + getToken(),
@ -121,7 +124,7 @@ export default {
return false; return false;
}); });
if (!isTypeOk) { if (!isTypeOk) {
this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`); this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
return false; return false;
} }
} }
@ -129,25 +132,33 @@ export default {
if (this.fileSize) { if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize; const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) { if (!isLt) {
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`); this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false; return false;
} }
} }
this.$modal.loading("正在上传文件,请稍候...");
this.number++;
return true; return true;
}, },
// //
handleExceed() { handleExceed() {
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
}, },
// //
handleUploadError(err) { handleUploadError(err) {
this.$message.error("上传失败, 请重试"); this.$modal.msgError("上传图片失败,请重试");
this.$modal.closeLoading()
}, },
// //
handleUploadSuccess(res, file) { handleUploadSuccess(res) {
this.$message.success("上传成功"); this.uploadList.push({ name: res.data.url, url: res.data.url });
this.fileList.push({ name: res.data.url, url: res.data.url }); 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.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading();
}
}, },
// //
handleDelete(index) { handleDelete(index) {
@ -157,7 +168,7 @@ export default {
// //
getFileName(name) { getFileName(name) {
if (name.lastIndexOf("/") > -1) { if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1).toLowerCase(); return name.slice(name.lastIndexOf("/") + 1);
} else { } else {
return ""; return "";
} }

23
ruoyi-ui/src/components/ImageUpload/index.vue

@ -128,7 +128,7 @@ export default {
this.uploadList = []; this.uploadList = [];
this.number = 0; this.number = 0;
this.$emit("input", this.listToString(this.fileList)); this.$emit("input", this.listToString(this.fileList));
this.loading.close(); this.$modal.closeLoading();
} }
}, },
// loading // loading
@ -149,36 +149,27 @@ export default {
} }
if (!isImg) { if (!isImg) {
this.$message.error( this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
);
return false; return false;
} }
if (this.fileSize) { if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize; const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) { if (!isLt) {
this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`); this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
return false; return false;
} }
} }
this.loading = this.$loading({ this.$modal.loading("正在上传图片,请稍候...");
lock: true,
text: "上传中",
background: "rgba(0, 0, 0, 0.7)",
});
this.number++; this.number++;
}, },
// //
handleExceed() { handleExceed() {
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
}, },
// //
handleUploadError() { handleUploadError() {
this.$message({ this.$modal.msgError("上传图片失败,请重试");
type: "error", this.$modal.closeLoading();
message: "上传失败",
});
this.loading.close();
}, },
// //
handlePictureCardPreview(file) { handlePictureCardPreview(file) {

2
ruoyi-ui/src/views/system/user/index.vue

@ -443,7 +443,7 @@ export default {
email: [ email: [
{ {
type: "email", type: "email",
message: "'请输入正确的邮箱地址", message: "请输入正确的邮箱地址",
trigger: ["blur", "change"] trigger: ["blur", "change"]
} }
], ],

Loading…
Cancel
Save