odboy/cutejava
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(system): 优化文件上传功能并添加前端上传组件

Browse Source 
- 修改后端文件上传接口，返回上传文件的URL
- 新增文件上传前的本地校验逻辑- 实现文件拖拽上传功能
- 添加两个新的前端上传组件：CuteFileUpload 和 CuteFileDragUpload
- 更新后端 MinioRepository 类，支持生成预签名 URL
This commit is contained in:
odboy
2025-07-17 22:48:37 +08:00
parent f11016b67a
commit dcb696a94a
8 changed files with 204 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.MD
+2
View File
@@ -72,6 +72,8 @@ https://github.com/odboy-tianjun/cutejava
- CuteDeptTree 部门树
- CuteUserSelect 用户多选框
- CuteFileUpload 上传文件到OSS, 必须结合Minio使用（上传完成后必须销毁组件）
- CuteFileDragUpload 支持拖拽上传文件到OSS, 必须结合Minio使用（上传完成后必须销毁组件）
#### 系统模块
cutejava-front/src/views/components/business/CuteFileDragUpload.vue
+69
View File
@@ -0,0 +1,69 @@
<template>
<el-upload
ref="upload"
drag
:limit="1"
:before-upload="beforeUpload"
:auto-upload="true"
:headers="headers"
:on-success="handleSuccess"
:on-error="handleError"
:action="ossUploadApi"
>
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传不超过100MB的文件</div>
</el-upload>
</template>
<script>
import { Message } from 'element-ui'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
export default {
name: 'CuteFileUpload',
props: {
value: {
type: Object,
required: true,
default: null
}
},
data() {
return {
headers: { 'Authorization': getToken() }
}
},
computed: {
...mapGetters([
'baseApi',
'ossUploadApi'
])
},
methods: {
beforeUpload(file) {
let isLt2M = true
isLt2M = file.size / 1024 / 1024 < 100
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 100MB')
return false
}
return isLt2M
},
// 监听上传失成功
handleSuccess(response, file, fileList) {
// Message.success('上传成功')
// this.$refs.upload.clearFiles()
console.error('response', response)
console.error('file', file)
console.error('fileList', fileList)
this.value.fileUrl = response
},
// 监听上传失败
handleError(e, file, fileList) {
const msg = JSON.parse(e.message)
Message.error(msg.message)
}
}
}
</script>
cutejava-front/src/views/components/business/CuteFileUpload.vue
+67
View File
@@ -0,0 +1,67 @@
<template>
<el-upload
ref="upload"
:limit="1"
:before-upload="beforeUpload"
:auto-upload="true"
:headers="headers"
:on-success="handleSuccess"
:on-error="handleError"
:action="ossUploadApi"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传不超过100MB的文件</div>
</el-upload>
</template>
<script>
import { Message } from 'element-ui'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
export default {
name: 'CuteFileUpload',
props: {
value: {
type: Object,
required: true,
default: null
}
},
data() {
return {
headers: { 'Authorization': getToken() }
}
},
computed: {
...mapGetters([
'baseApi',
'ossUploadApi'
])
},
methods: {
beforeUpload(file) {
let isLt2M = true
isLt2M = file.size / 1024 / 1024 < 100
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 100MB')
return false
}
return isLt2M
},
// 监听上传失成功
handleSuccess(response, file, fileList) {
// Message.success('上传成功')
// this.$refs.upload.clearFiles()
console.error('response', response)
console.error('file', file)
console.error('fileList', fileList)
this.value.fileUrl = response
},
// 监听上传失败
handleError(e, file, fileList) {
const msg = JSON.parse(e.message)
Message.error(msg.message)
}
}
}
</script>
cutejava-front/src/views/system/storage/oss/index.vue
+2 -6
View File
@@ -40,9 +40,6 @@
width="500px"
>
<el-form ref="form" :model="form" size="small" label-width="80px">
<el-form-item label="文件名">
<el-input v-model="form.name" style="width: 370px;" />
</el-form-item>
<!-- 上传文件 -->
<el-form-item v-if="crud.status.add" label="上传">
<el-upload
@@ -53,7 +50,7 @@
:headers="headers"
:on-success="handleSuccess"
:on-error="handleError"
:action="ossUploadApi + '?name=' + form.name"
:action="ossUploadApi"
>
<div class="my-upload"><i class="el-icon-upload" /> 添加文件</div>
<div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
@@ -106,7 +103,7 @@ import DateRangePicker from '@/components/DateRangePicker'
import Clipboard from 'clipboard'
import { Message } from 'element-ui'
const defaultForm = { id: null, name: '' }
const defaultForm = { id: null }
export default {
components: { pagination, crudOperation, rrOperation, DateRangePicker },
cruds() {
@@ -145,7 +142,6 @@ export default {
this.loading = false
this.$message.error('上传文件大小不能超过 100MB')
}
this.form.name = file.name
return isLt2M
},
handleSuccess(response, file, fileList) {
cutejava/cutejava-module-system/src/main/java/cn/odboy/system/controller/SystemOssStorageController.java
+3 -3
View File
@@ -49,9 +49,9 @@ public class SystemOssStorageController {
@ApiOperation("上传文件")
@PostMapping(value = "/uploadFile")
@PreAuthorize("@el.check('storage:add')")
public ResponseEntity<Void> uploadFile(@RequestParam String name, @RequestParam("file") MultipartFile file) {
systemOssStorageService.uploadFile(name, file);
return new ResponseEntity<>(HttpStatus.CREATED);
public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
String fileUrl = systemOssStorageService.uploadFile(file);
return ResponseEntity.ok(fileUrl);
}
@ApiOperation("多选删除")
cutejava/cutejava-module-system/src/main/java/cn/odboy/system/framework/storage/minio/MinioRepository.java
+19 -26
View File
@@ -11,7 +11,6 @@ import cn.odboy.framework.exception.BadRequestException;
import cn.odboy.framework.properties.AppProperties;
import cn.odboy.framework.properties.model.OSSConfigModel;
import cn.odboy.framework.properties.model.StorageOSSModel;
import cn.odboy.framework.server.core.FileUploadPathHelper;
import cn.odboy.system.dal.dataobject.SystemOssStorageTb;
import cn.odboy.util.CsDateUtil;
import cn.odboy.util.FileUtil;
@@ -38,7 +37,6 @@ import java.util.List;
public class MinioRepository {
private final AppProperties properties;
private final MinioClient minioClient;
private final FileUploadPathHelper fileUploadPathHelper;
/**
* 检查存储bucket是否存在
@@ -114,27 +112,19 @@ public class MinioRepository {
/**
* 文件上传
*
* @param file 文件
* @param tempFile 文件
* @param originalFilename 源文件名
* @param fileSize 文件大小
* @param contentType 文件类型
* @param md5 文件md5
* @return String 上传后的文件名，上传失败返回 null
*/
public SystemOssStorageTb upload(MultipartFile file) {
String originalFilename = file.getOriginalFilename();
if (StrUtil.isBlank(originalFilename)) {
throw new BadRequestException("文件名不能为空");
}
public SystemOssStorageTb upload(File tempFile, String originalFilename, long fileSize, String contentType, String md5) {
StorageOSSModel ossConfig = properties.getOss();
OSSConfigModel ossMinioConfig = ossConfig.getMinio();
long fileSize = file.getSize();
FileUtil.checkSize(ossConfig.getMaxSize(), fileSize);
String contentType = file.getContentType();
// 按天分组
String nowDateStr = CsDateUtil.getNowDateStr();
File tempFile = FileUtil.upload(file, fileUploadPathHelper.getPath() + nowDateStr + File.separator);
if (tempFile == null) {
throw new BadRequestException("上传失败");
}
String type = FileTypeUtil.getType(tempFile);
String prefix = FileUtil.getPrefix(tempFile);
String suffix = FileUtil.getSuffix(tempFile);
String fileCode = IdUtil.fastSimpleUUID();
String fileName = fileCode + getFileExtension(originalFilename);
@@ -148,10 +138,10 @@ public class MinioRepository {
systemOssStorageTb.setBucketName(StrUtil.trim(ossMinioConfig.getBucketName()));
systemOssStorageTb.setFileName(originalFilename);
systemOssStorageTb.setFileSize(fileSize);
systemOssStorageTb.setFileMime(FileTypeUtil.getType(tempFile));
systemOssStorageTb.setFilePrefix(FileUtil.getPrefix(tempFile));
systemOssStorageTb.setFileSuffix(FileUtil.getSuffix(tempFile));
systemOssStorageTb.setFileMd5(FileUtil.getMd5(tempFile));
systemOssStorageTb.setFileMime(type);
systemOssStorageTb.setFilePrefix(prefix);
systemOssStorageTb.setFileSuffix(suffix);
systemOssStorageTb.setFileMd5(md5);
systemOssStorageTb.setFileUrl(fileUrl);
systemOssStorageTb.setFileCode(fileCode);
systemOssStorageTb.setObjectName(objectName);
@@ -276,9 +266,12 @@ public class MinioRepository {
return null;
}
try {
GetPresignedObjectUrlArgs presignedUrlArgs = GetPresignedObjectUrlArgs.builder().bucket(properties.getOss().getMinio().getBucketName()).object(fullFileName).method(Method.GET)
// 设置 URL 过期时间为 1 小时
.expiry(3600).build();
GetPresignedObjectUrlArgs presignedUrlArgs = GetPresignedObjectUrlArgs.builder()
.bucket(properties.getOss().getMinio().getBucketName())
.object(fullFileName)
.method(Method.GET)
// 设置 URL 过期时间为 7 天, 最大 7 天, 别挣扎了
.expiry(3600 * 24 * 7).build();
String url = minioClient.getPresignedObjectUrl(presignedUrlArgs);
log.info("生成预签名 URL 成功，fileName: {}, url: {}", fullFileName, url);
return url;
cutejava/cutejava-module-system/src/main/java/cn/odboy/system/service/SystemOssStorageService.java
+3 -1
View File
@@ -27,7 +27,9 @@ public interface SystemOssStorageService extends IService<SystemOssStorageTb> {
void exportOssStorageExcel(List<SystemOssStorageVo> list, HttpServletResponse response) throws IOException;
void uploadFile(String name, MultipartFile file);
String uploadFile(MultipartFile file);
void removeFileByIds(Long[] ids);
SystemOssStorageTb getByMd5(String md5);
}
cutejava/cutejava-module-system/src/main/java/cn/odboy/system/service/impl/SystemOssStorageServiceImpl.java
+39 -2
View File
@@ -1,14 +1,19 @@
package cn.odboy.system.service.impl;
import cn.hutool.core.bean.BeanUtil;
import cn.hutool.core.util.StrUtil;
import cn.odboy.base.CsResultVo;
import cn.odboy.framework.exception.BadRequestException;
import cn.odboy.framework.properties.AppProperties;
import cn.odboy.framework.properties.model.StorageOSSModel;
import cn.odboy.framework.server.core.FileUploadPathHelper;
import cn.odboy.system.dal.dataobject.SystemOssStorageTb;
import cn.odboy.system.dal.model.SystemOssStorageVo;
import cn.odboy.system.dal.model.SystemQueryStorageArgs;
import cn.odboy.system.dal.mysql.SystemOssStorageMapper;
import cn.odboy.system.framework.storage.minio.MinioRepository;
import cn.odboy.system.service.SystemOssStorageService;
import cn.odboy.util.CsDateUtil;
import cn.odboy.util.CsPageUtil;
import cn.odboy.util.FileUtil;
import com.baomidou.mybatisplus.core.metadata.IPage;
@@ -20,6 +25,7 @@ import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.LinkedHashMap;
@@ -38,6 +44,8 @@ import java.util.Map;
@RequiredArgsConstructor
public class SystemOssStorageServiceImpl extends ServiceImpl<SystemOssStorageMapper, SystemOssStorageTb> implements SystemOssStorageService {
private final MinioRepository minioRepository;
private final AppProperties properties;
private final FileUploadPathHelper fileUploadPathHelper;
@Override
public CsResultVo<List<SystemOssStorageVo>> queryOssStorage(SystemQueryStorageArgs criteria, Page<SystemOssStorageTb> page) {
@@ -77,12 +85,36 @@ public class SystemOssStorageServiceImpl extends ServiceImpl<SystemOssStorageMap
@Override
@Transactional(rollbackFor = Exception.class)
public void uploadFile(String name, MultipartFile file) {
SystemOssStorageTb storageTb = minioRepository.upload(file);
public String uploadFile(MultipartFile file) {
String originalFilename = file.getOriginalFilename();
if (StrUtil.isBlank(originalFilename)) {
throw new BadRequestException("文件名不能为空");
}
StorageOSSModel ossConfig = properties.getOss();
long fileSize = file.getSize();
String contentType = file.getContentType();
FileUtil.checkSize(ossConfig.getMaxSize(), fileSize);
// 按天分组
String nowDateStr = CsDateUtil.getNowDateStr();
// 上传到本地临时目录
File tempFile = FileUtil.upload(file, fileUploadPathHelper.getPath() + nowDateStr + File.separator);
if (tempFile == null) {
throw new BadRequestException("上传失败");
}
// 校验文件md5, 看是否已存在云端（不确定, 可能云端已经删除, 但是正常来说云端是不允许私自删除的, 所以这里忽略云端不存在的情况）
String md5 = FileUtil.getMd5(tempFile);
SystemOssStorageTb systemOssStorageTb = getByMd5(md5);
if (systemOssStorageTb != null) {
// 重新生成7天链接
return minioRepository.generatePreviewUrl(systemOssStorageTb.getObjectName());
}
// 上传到OSS
SystemOssStorageTb storageTb = minioRepository.upload(tempFile, originalFilename, fileSize, contentType, md5);
if (storageTb == null) {
throw new BadRequestException("文件上传失败");
}
save(storageTb);
return minioRepository.generatePreviewUrl(storageTb.getObjectName());
}
/**
@@ -98,4 +130,9 @@ public class SystemOssStorageServiceImpl extends ServiceImpl<SystemOssStorageMap
removeById(storage);
}
}
@Override
public SystemOssStorageTb getByMd5(String md5) {
return lambdaQuery().eq(SystemOssStorageTb::getFileMd5, md5).one();
}
}