eric/ar-inspection
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: cos upload support

Browse Source
This commit is contained in:
杨建宽
2025-12-19 11:43:05 +08:00
parent f9eaa441a3
commit 9a12ef5e2e
11 changed files with 571 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.claude/settings.local.json
View File

@@ -5,7 +5,8 @@
"Bash(mvn clean package:*)",
"Bash(echo:*)",
"Bash(git add:*)",
"Bash(git commit:*)"
"Bash(git commit:*)",
"Bash(ls:*)"
],
"deny": [],
"ask": []

3
plus-ui/package.json
View File

@@ -40,7 +40,8 @@
"vue-json-pretty": "2.4.0",
"vue-router": "4.5.0",
"vue-types": "6.0.0",
"vxe-table": "4.13.7"
"vxe-table": "4.13.7",
"cos-js-sdk-v5": "^1.8.7"
},
"devDependencies": {
"@iconify/json": "^2.2.276",

69
plus-ui/src/api/inspection/cos/index.ts Normal file
View File

@@ -0,0 +1,69 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import COS from 'cos-js-sdk-v5';
/**
* COS临时凭证响应
*/
export interface CosCredentialResponse {
credentials: {
tmpSecretId: string;
tmpSecretKey: string;
sessionToken: string;
};
startTime: number;
expiredTime: number;
expiration: string;
}
/**
* COS配置响应
*/
export interface CosConfigResponse {
bucket: string;
region: string;
}
/**
* 获取COS临时凭证
*/
export const getCosCredential = (): AxiosPromise<CosCredentialResponse> => {
return request({
url: '/inspection/cos/credential',
method: 'get'
});
};
/**
* 获取COS配置信息
*/
export const getCosConfig = (): AxiosPromise<CosConfigResponse> => {
return request({
url: '/inspection/cos/config',
method: 'get'
});
};
/**
* 创建COS实例(包含自动获取凭证)
*/
export const createCosInstance = (): COS => {
return new COS({
getAuthorization: (options, callback) => {
getCosCredential()
.then((res) => {
const credentials = res.data.credentials;
callback({
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
SecurityToken: credentials.sessionToken,
StartTime: res.data.startTime,
ExpiredTime: res.data.expiredTime
});
})
.catch((error) => {
console.error('获取COS临时凭证失败:', error);
});
}
});
};

18
plus-ui/src/api/inspection/cos/types.ts Normal file
View File

@@ -0,0 +1,18 @@
/**
* COS上传回调参数
*/
export interface CosUploadCallbackData {
Location: string; // 完整URL(不含协议)
statusCode: number;
headers: any;
}
/**
* COS上传进度回调
*/
export interface CosUploadProgress {
loaded: number; // 已上传字节数
total: number; // 总字节数
speed: number; // 上传速度(字节/秒)
percent: number; // 上传进度(0-1)
}

275
plus-ui/src/components/AudioUpload/index.vue Normal file
View File

@@ -0,0 +1,275 @@
<template>
<div class="audio-upload-container">
<el-upload
ref="audioUploadRef"
:auto-upload="false"
:show-file-list="false"
:accept="fileAccept"
:on-change="handleFileChange"
:disabled="disabled || uploading"
>
<el-button type="primary" :icon="Upload" :disabled="disabled || uploading">
{{ uploading ? '上传中...' : '选择音频文件' }}
</el-button>
</el-upload>
<!-- 上传提示 -->
<div v-if="showTip" class="el-upload__tip">
支持格式: <b style="color: #f56c6c">{{ fileType.join('、') }}</b>,
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
</div>
<!-- 上传进度 -->
<div v-if="uploading" class="upload-progress">
<el-progress :percentage="uploadPercent" :status="uploadStatus" />
<span class="progress-text">{{ progressText }}</span>
</div>
<!-- 已上传文件显示 -->
<div v-if="currentFile && !uploading" class="file-preview">
<div class="file-info">
<el-icon class="file-icon"><Headset /></el-icon>
<span class="file-name">{{ currentFile.name }}</span>
</div>
<div class="file-actions">
<el-button v-if="currentFile.url" type="primary" link @click="previewAudio">试听</el-button>
<el-button v-if="!disabled" type="danger" link @click="handleRemove">删除</el-button>
</div>
</div>
<!-- 音频预览对话框 -->
<el-dialog v-model="previewVisible" title="音频预览" width="500px" append-to-body>
<audio v-if="previewUrl" :src="previewUrl" controls style="width: 100%"></audio>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, computed, watch, getCurrentInstance, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Upload, Headset } from '@element-plus/icons-vue';
import { createCosInstance, getCosConfig } from '@/api/inspection/cos';
import type { CosUploadProgress } from '@/api/inspection/cos/types';
import type { ComponentInternalInstance } from 'vue';
interface Props {
modelValue?: string; // v-model绑定的URL
fileSize?: number; // 文件大小限制(MB)
fileType?: string[]; // 支持的文件类型
disabled?: boolean; // 是否禁用
showTip?: boolean; // 是否显示提示
}
const props = withDefaults(defineProps<Props>(), {
modelValue: '',
fileSize: 10,
fileType: () => ['mp3', 'wav', 'm4a', 'aac', 'ogg'],
disabled: false,
showTip: true
});
const emit = defineEmits<{
'update:modelValue': [value: string];
'upload-success': [url: string];
'upload-error': [error: any];
}>();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const audioUploadRef = ref();
const currentFile = ref<{ name: string; url?: string } | null>(null);
const uploading = ref(false);
const uploadPercent = ref(0);
const uploadStatus = ref<'success' | 'exception' | 'warning'>('success');
const previewVisible = ref(false);
const previewUrl = ref('');
// COS配置
const cosConfig = ref<{ bucket: string; region: string }>();
// 计算accept属性
const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
// 进度文本
const progressText = computed(() => {
if (uploadPercent.value < 100) {
return `正在上传: ${uploadPercent.value}%`;
}
return '上传完成';
});
// 监听modelValue变化
watch(
() => props.modelValue,
(url) => {
if (url) {
// 从URL提取文件名
const fileName = url.substring(url.lastIndexOf('/') + 1);
currentFile.value = { name: decodeURIComponent(fileName), url };
} else {
currentFile.value = null;
}
},
{ immediate: true }
);
// 初始化COS配置
const initCosConfig = async () => {
try {
const res = await getCosConfig();
cosConfig.value = res.data;
} catch (error) {
console.error('获取COS配置失败:', error);
}
};
// 组件挂载时初始化
onMounted(() => {
initCosConfig();
});
// 文件选择变化
const handleFileChange = (file: any) => {
// 校验文件类型
const fileName = file.name;
const fileExt = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
if (!props.fileType.includes(fileExt)) {
proxy?.$modal.msgError(`文件格式不正确,请上传${props.fileType.join('、')}格式的音频文件!`);
return;
}
// 校验文件大小
const fileSizeMB = file.size / 1024 / 1024;
if (fileSizeMB > props.fileSize) {
proxy?.$modal.msgError(`文件大小不能超过${props.fileSize}MB!`);
return;
}
// 开始上传
uploadToCos(file.raw, fileName);
};
// 上传到COS
const uploadToCos = async (file: File, fileName: string) => {
if (!cosConfig.value) {
ElMessage.error('COS配置未加载,请稍后重试');
return;
}
uploading.value = true;
uploadPercent.value = 0;
uploadStatus.value = 'success';
try {
const cos = createCosInstance();
const timestamp = Date.now();
const key = `audio/${timestamp}_${fileName}`;
cos.uploadFile(
{
Bucket: cosConfig.value.bucket,
Region: cosConfig.value.region,
Key: key,
Body: file,
SliceSize: 1024 * 1024 * 100, // 大于100MB使用分块上传
onProgress: (progressData: CosUploadProgress) => {
uploadPercent.value = Math.round(progressData.percent * 100);
}
},
(err: any, data: any) => {
uploading.value = false;
if (err) {
uploadStatus.value = 'exception';
ElMessage.error('上传失败: ' + err.message);
emit('upload-error', err);
return;
}
// 上传成功
const url = 'https://' + data.Location;
currentFile.value = { name: fileName, url };
emit('update:modelValue', url);
emit('upload-success', url);
ElMessage.success('上传成功');
}
);
} catch (error) {
uploading.value = false;
uploadStatus.value = 'exception';
ElMessage.error('上传失败: ' + error);
emit('upload-error', error);
}
};
// 删除文件
const handleRemove = () => {
currentFile.value = null;
uploadPercent.value = 0;
emit('update:modelValue', '');
};
// 预览音频
const previewAudio = () => {
if (currentFile.value?.url) {
previewUrl.value = currentFile.value.url;
previewVisible.value = true;
}
};
</script>
<style lang="scss" scoped>
.audio-upload-container {
.el-upload__tip {
margin-top: 8px;
font-size: 12px;
color: #606266;
}
.upload-progress {
margin-top: 12px;
.progress-text {
display: block;
margin-top: 8px;
font-size: 12px;
color: #606266;
}
}
.file-preview {
margin-top: 12px;
padding: 8px 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
.file-info {
display: flex;
align-items: center;
flex: 1;
.file-icon {
font-size: 20px;
margin-right: 8px;
color: #409eff;
}
.file-name {
font-size: 14px;
color: #606266;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.file-actions {
display: flex;
gap: 8px;
}
}
}
</style>

13
plus-ui/src/views/inspection/step/index.vue
View File

@@ -140,8 +140,8 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="内容语音URL" prop="contentVoice">
<el-input v-model="form.contentVoice" placeholder="请输入内容语音URL" />
<el-form-item label="内容语音" prop="contentVoice">
<AudioUpload v-model="form.contentVoice" :file-size="10" />
</el-form-item>
</el-col>
</el-row>
@@ -172,8 +172,8 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="复述语音URL" prop="rephraseVoice">
<el-input v-model="form.rephraseVoice" placeholder="语音URL" />
<el-form-item label="复述语音" prop="rephraseVoice">
<AudioUpload v-model="form.rephraseVoice" :file-size="10" />
</el-form-item>
</el-col>
</el-row>
@@ -189,8 +189,8 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="确认语音URL" prop="confirmVoice">
<el-input v-model="form.confirmVoice" placeholder="语音URL" />
<el-form-item label="确认语音" prop="confirmVoice">
<AudioUpload v-model="form.confirmVoice" :file-size="10" />
</el-form-item>
</el-col>
</el-row>
@@ -243,6 +243,7 @@ import { listArTask } from '@/api/inspection/task';
import { ArTaskVO } from '@/api/inspection/task/types';
import { listArPoint } from '@/api/inspection/point';
import { ArPointVO } from '@/api/inspection/point/types';
import AudioUpload from '@/components/AudioUpload/index.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();

10
ruoyi-admin/src/main/resources/application-dev.yml
View File

@@ -268,3 +268,13 @@ justauth:
client-id: 10**********6
client-secret: 1f7d08**********5b7**********29e
redirect-uri: ${justauth.address}/social-callback?source=gitea
--- # 腾讯云COS配置
tencent:
cos:
secret-id: AKIDBDu22pdIn8Tjx9D6nGWt68wY0JQJ0T3U
secret-key: HJ6i6MtHRP9fzDD3f3EBuPjqmUzGJ8qK
duration-seconds: 1800
bucket: nc-1375092979
region: ap-nanjing
app-id: 1375092979

10
ruoyi-admin/src/main/resources/application-prod.yml
View File

@@ -270,3 +270,13 @@ justauth:
client-id: 10**********6
client-secret: 1f7d08**********5b7**********29e
redirect-uri: ${justauth.address}/social-callback?source=gitea
--- # 腾讯云COS配置
tencent:
cos:
secret-id: AKIDBDu22pdIn8Tjx9D6nGWt68wY0JQJ0T3U
secret-key: HJ6i6MtHRP9fzDD3f3EBuPjqmUzGJ8qK
duration-seconds: 1800
bucket: nc-1375092979
region: ap-nanjing
app-id: 1375092979

7
ruoyi-modules/ruoyi-inspection/pom.xml
View File

@@ -78,6 +78,13 @@
<artifactId>ruoyi-common-oss</artifactId>
</dependency>
<!-- 腾讯云COS临时密钥生成 -->
<dependency>
<groupId>com.qcloud</groupId>
<artifactId>cos-sts_api</artifactId>
<version>3.1.0</version>
</dependency>
</dependencies>
</project>

46
ruoyi-modules/ruoyi-inspection/src/main/java/org/dromara/inspection/config/TencentCosProperties.java Normal file
View File

@@ -0,0 +1,46 @@
package org.dromara.inspection.config;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
/**
* 腾讯云COS配置属性
*
* @author LionLi
*/
@Data
@Component
@ConfigurationProperties(prefix = "tencent.cos")
public class TencentCosProperties {
/**
* 腾讯云SecretId
*/
private String secretId;
/**
* 腾讯云SecretKey
*/
private String secretKey;
/**
* 临时密钥有效期(秒),默认1800秒=30分钟
*/
private Integer durationSeconds = 1800;
/**
* 存储桶名称
*/
private String bucket;
/**
* 存储桶所在地域
*/
private String region;
/**
* 腾讯云AppId
*/
private String appId;
}

125
ruoyi-modules/ruoyi-inspection/src/main/java/org/dromara/inspection/controller/TencentCosController.java Normal file
View File

@@ -0,0 +1,125 @@
package org.dromara.inspection.controller;
import cn.dev33.satoken.annotation.SaCheckPermission;
import com.tencent.cloud.CosStsClient;
import com.tencent.cloud.Policy;
import com.tencent.cloud.Response;
import com.tencent.cloud.Statement;
import com.tencent.cloud.cos.util.Jackson;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.dromara.common.core.domain.R;
import org.dromara.common.log.annotation.Log;
import org.dromara.common.log.enums.BusinessType;
import org.dromara.common.redis.utils.RedisUtils;
import org.dromara.inspection.config.TencentCosProperties;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.time.Duration;
import java.util.HashMap;
import java.util.Map;
import java.util.TreeMap;
/**
* 腾讯云COS临时凭证Controller
*
* @author LionLi
*/
@Slf4j
@Validated
@RequiredArgsConstructor
@RestController
@RequestMapping("/inspection/cos")
public class TencentCosController {
private final TencentCosProperties cosProperties;
private static final String CACHE_KEY = "inspection:cos:credential";
private static final int CACHE_EXPIRE_SECONDS = 1500; // 缓存25分钟,临时密钥30分钟过期
/**
* 获取腾讯云COS临时上传凭证
*/
@SaCheckPermission("inspection:step:edit")
@Log(title = "获取COS临时凭证", businessType = BusinessType.OTHER)
@GetMapping("/credential")
public R<Response> getCredential() {
// 先从缓存获取
Response cachedCredential = RedisUtils.getCacheObject(CACHE_KEY);
if (cachedCredential != null) {
return R.ok(cachedCredential);
}
try {
// 构建配置参数
TreeMap<String, Object> config = new TreeMap<>();
config.put("secretId", cosProperties.getSecretId());
config.put("secretKey", cosProperties.getSecretKey());
config.put("durationSeconds", cosProperties.getDurationSeconds());
config.put("bucket", cosProperties.getBucket());
config.put("region", cosProperties.getRegion());
// 初始化 policy
Policy policy = new Policy();
// 开始构建一条 statement
Statement statement = new Statement();
// 声明设置的结果是允许操作
statement.setEffect("allow");
// 添加操作权限
statement.addActions(new String[]{
// 简单上传
"cos:PutObject",
"cos:PostObject",
// 分块上传
"cos:InitiateMultipartUpload",
"cos:ListMultipartUploads",
"cos:ListParts",
"cos:UploadPart",
"cos:CompleteMultipartUpload"
});
// 设置允许操作的资源路径(限定只能上传到audio目录)
// 格式: qcs::cos:{region}:uid/{appid}:{bucket}/{path}
statement.addResources(new String[]{
"qcs::cos:" + cosProperties.getRegion() +
":uid/" + cosProperties.getAppId() +
":" + cosProperties.getBucket() +
"/audio/*"
});
// 把一条 statement 添加到 policy
policy.addStatement(statement);
// 将 Policy 实例转化成 String
config.put("policy", Jackson.toJsonPrettyString(policy));
// 获取临时密钥
Response response = CosStsClient.getCredential(config);
// 缓存凭证(25分钟,临时密钥30分钟过期)
RedisUtils.setCacheObject(CACHE_KEY, response, Duration.ofSeconds(CACHE_EXPIRE_SECONDS));
return R.ok(response);
} catch (Exception e) {
log.error("获取临时COS凭证失败", e);
return R.fail("获取临时凭证失败:" + e.getMessage());
}
}
/**
* 获取COS配置信息(供前端使用)
*/
@SaCheckPermission("inspection:step:edit")
@GetMapping("/config")
public R<Map<String, String>> getConfig() {
Map<String, String> config = new HashMap<>();
config.put("bucket", cosProperties.getBucket());
config.put("region", cosProperties.getRegion());
return R.ok(config);
}
}