feat: 版本管理文件上传修改为 oss 真传
This commit is contained in:
parent
4eb7744111
commit
98403f2acc
|
|
@ -36,6 +36,7 @@
|
|||
"@vueuse/core": "^12.5.0",
|
||||
"@wangeditor-next/editor": "^5.6.31",
|
||||
"@wangeditor-next/editor-for-vue": "^5.1.14",
|
||||
"ali-oss": "^6.22.0",
|
||||
"axios": "^1.7.9",
|
||||
"bwip-js": "^4.5.1",
|
||||
"codemirror": "^5.65.18",
|
||||
|
|
@ -57,6 +58,7 @@
|
|||
"sockjs-client": "^1.6.1",
|
||||
"sortablejs": "^1.15.6",
|
||||
"vue": "^3.5.13",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-i18n": "^11.1.0",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -29,10 +29,27 @@ const VersionApi = {
|
|||
method: "delete",
|
||||
});
|
||||
},
|
||||
//获取上传临时凭证
|
||||
getCredentials() {
|
||||
return request<any, ossConfig>({
|
||||
url: `${baseURL}/getCredentials`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default VersionApi;
|
||||
|
||||
export interface ossConfig {
|
||||
accessKeyId: string;
|
||||
accessKeySecret: string;
|
||||
expiration: string;
|
||||
securityToken: number;
|
||||
}
|
||||
|
||||
|
||||
export interface versionForm {
|
||||
/**
|
||||
* 版本 id
|
||||
|
|
|
|||
|
|
@ -0,0 +1,124 @@
|
|||
import OSS from "ali-oss";
|
||||
import versionApi from "@/api/system/version";
|
||||
|
||||
const $headers = {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
};
|
||||
const $config = {
|
||||
region: "oss-cn-beijing",
|
||||
accessKeyId: "",
|
||||
accessKeySecret: "",
|
||||
bucket: "cashier-oss",
|
||||
};
|
||||
import { ElMessage } from "element-plus";
|
||||
function urlConversion(path) {
|
||||
let reg = /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i;
|
||||
path = path.replace(reg, "https://$2$3$4$5$6");
|
||||
return path;
|
||||
}
|
||||
|
||||
async function uploadAndDownloadFile(name, file, headers) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
ossClient.put(name, file, { ...$headers, ...headers }).then((res) => {
|
||||
console.log(res);
|
||||
resolve(res);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
class ossClient {
|
||||
constructor(config) {
|
||||
this.ossClient = new OSS({
|
||||
...$config,
|
||||
...config,
|
||||
refreshSTSToken: async () => {
|
||||
// 向您搭建的STS服务获取临时访问凭证。
|
||||
const res = await versionApi.getCredentials();
|
||||
return {
|
||||
accessKeyId: res.accessKeyId, // 自己账户的accessKeyId或临时秘钥
|
||||
accessKeySecret: res.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
|
||||
stsToken: res.securityToken, // 从STS服务获取的安全令牌（SecurityToken）。
|
||||
};
|
||||
},
|
||||
// 刷新临时访问凭证的时间间隔，单位为毫秒。
|
||||
refreshSTSTokenInterval: 3600 * 1000,
|
||||
});
|
||||
}
|
||||
async upload(name, file, progressCallback) {
|
||||
try {
|
||||
let options = {
|
||||
// 获取分片上传进度、断点和返回值。
|
||||
progress: progressCallback,
|
||||
headers: $headers,
|
||||
};
|
||||
const { res: resp } = await this.ossClient.put(name, file, options).catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
return resp.requestUrls;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
reject(error);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 分片上传
|
||||
* @param {Object} client oss客户端
|
||||
* @param {Object} file 上传的文件
|
||||
* @param {Object} dir 上传oss的文件夹
|
||||
* @param {Object} progressCallback 分片进度回调
|
||||
*/
|
||||
async partUpload(name, file, progressCallback) {
|
||||
try {
|
||||
let options = {
|
||||
// 获取分片上传进度、断点和返回值。
|
||||
progress: progressCallback,
|
||||
|
||||
// 设置并发上传的分片数量。
|
||||
parallel: 8,
|
||||
// 设置分片大小。默认值为1 MB，最小值为100 KB。
|
||||
partSize: 100 * 1024,
|
||||
mime: file.type,
|
||||
};
|
||||
const { res: resp } = await this.ossClient.multipartUpload(
|
||||
name ? name : file.name,
|
||||
file,
|
||||
options
|
||||
);
|
||||
// return resp.requestUrls
|
||||
console.log("------resp---");
|
||||
console.log(resp);
|
||||
return urlConversion(`${resp.requestUrls[0]}`.split("?")[0]);
|
||||
} catch (e) {
|
||||
console.log("------e---");
|
||||
console.log(e);
|
||||
if (e.name == "cancel") {
|
||||
ElMessage.error({
|
||||
title: "上传已取消",
|
||||
duration: 3000,
|
||||
});
|
||||
return e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束上传并删除碎片
|
||||
* @param {Object} client
|
||||
* @param {Object} uploadId
|
||||
* @param {Object} name
|
||||
*/
|
||||
async abortUpload(uploadId, name) {
|
||||
try {
|
||||
const res = await this.ossClient.abortMultipartUpload(name, uploadId);
|
||||
return res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return error;
|
||||
}
|
||||
}
|
||||
}
|
||||
export default ossClient;
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
<!-- 文件上传组件 -->
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
:auto-upload="true"
|
||||
:style="props.style"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:http-request="handleUpload"
|
||||
:on-progress="handleProgress"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:accept="props.accept"
|
||||
:limit="props.limit"
|
||||
multiple
|
||||
>
|
||||
<!-- 上传文件按钮 -->
|
||||
<el-button type="primary" :disabled="fileList.length >= props.limit">
|
||||
{{ props.uploadBtnText }}
|
||||
</el-button>
|
||||
|
||||
<!-- 文件列表 -->
|
||||
<template #file="{ file }">
|
||||
<div class="el-upload-list__item-info">
|
||||
<a class="el-upload-list__item-name" @click="handleDownload(file)">
|
||||
<el-icon><Document /></el-icon>
|
||||
<span class="el-upload-list__item-file-name">{{ file.name }}</span>
|
||||
<span class="el-icon--close" @click="handleRemove(file.url!)">
|
||||
<el-icon><Close /></el-icon>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<el-progress
|
||||
:style="{
|
||||
display: showProgress ? 'inline-flex' : 'none',
|
||||
width: '100%',
|
||||
}"
|
||||
:percentage="progressPercent"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
UploadRawFile,
|
||||
UploadUserFile,
|
||||
UploadProgressEvent,
|
||||
UploadRequestOptions,
|
||||
} from "element-plus";
|
||||
import VersionApi from "@/api/system/version";
|
||||
import OSS from "@/utils/oss-upload.js";
|
||||
let ossClient: any = null;
|
||||
async function getCredentials() {
|
||||
const res = await VersionApi.getCredentials();
|
||||
ossClient = new OSS({ ...res, stsToken: res.securityToken });
|
||||
console.log(ossClient);
|
||||
}
|
||||
onMounted(() => {
|
||||
getCredentials();
|
||||
});
|
||||
import CommonApi, { FileInfo, uploadResponse } from "@/api/account/common";
|
||||
|
||||
const props = defineProps({
|
||||
version: {
|
||||
type: [Boolean, Number],
|
||||
default: "",
|
||||
},
|
||||
/**
|
||||
* 请求携带的额外参数
|
||||
*/
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 上传文件的参数名
|
||||
*/
|
||||
name: {
|
||||
type: String,
|
||||
default: "file",
|
||||
},
|
||||
/**
|
||||
* 文件上传数量限制
|
||||
*/
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
/**
|
||||
* 单个文件上传大小限制(单位MB)
|
||||
*/
|
||||
maxFileSize: {
|
||||
type: Number,
|
||||
default: 300,
|
||||
},
|
||||
/**
|
||||
* 上传文件类型
|
||||
*/
|
||||
accept: {
|
||||
type: String,
|
||||
default: "*",
|
||||
},
|
||||
/**
|
||||
* 上传按钮文本
|
||||
*/
|
||||
uploadBtnText: {
|
||||
type: String,
|
||||
default: "上传文件",
|
||||
},
|
||||
|
||||
/**
|
||||
* 样式
|
||||
*/
|
||||
style: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
width: "300px",
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const modelValue = defineModel("modelValue", {
|
||||
type: [Array] as PropType<string[]>,
|
||||
required: true,
|
||||
default: () => [],
|
||||
});
|
||||
|
||||
const fileList = ref([] as UploadUserFile[]);
|
||||
|
||||
const showProgress = ref(false);
|
||||
const progressPercent = ref(0);
|
||||
|
||||
// 监听 modelValue 转换用于显示的 fileList
|
||||
watch(
|
||||
modelValue,
|
||||
(value) => {
|
||||
fileList.value = value.map((url) => {
|
||||
const name = url.substring(url.lastIndexOf("/") + 1);
|
||||
return {
|
||||
name: name,
|
||||
url: url,
|
||||
} as UploadUserFile;
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 上传前校验
|
||||
*/
|
||||
function handleBeforeUpload(file: UploadRawFile) {
|
||||
// 限制文件大小
|
||||
if (file.size > props.maxFileSize * 1024 * 1024) {
|
||||
ElMessage.warning("上传图片不能大于" + props.maxFileSize + "M");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/*
|
||||
* 上传文件
|
||||
*/
|
||||
function handleUpload(options: UploadRequestOptions) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const file = options.file;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append(props.name, file);
|
||||
|
||||
// 处理附加参数
|
||||
Object.keys(props.data).forEach((key) => {
|
||||
formData.append(key, props.data[key]);
|
||||
});
|
||||
const name = file.name;
|
||||
showProgress.value = true;
|
||||
ossClient
|
||||
.partUpload(`/version/${props.version}${name.replace(".apk", "")}`, file, (p: number) => {
|
||||
console.log("进度", p);
|
||||
handleProgress({
|
||||
percent: Math.floor(p * 100),
|
||||
lengthComputable: true,
|
||||
loaded: p * file.size,
|
||||
total: file.size,
|
||||
target: null,
|
||||
timeStamp: Date.now(),
|
||||
type: "",
|
||||
eventPhase: 0,
|
||||
bubbles: false,
|
||||
cancelable: false,
|
||||
defaultPrevented: false,
|
||||
isTrusted: true,
|
||||
returnValue: true,
|
||||
srcElement: null,
|
||||
currentTarget: null,
|
||||
composed: false,
|
||||
cancelBubble: false,
|
||||
NONE: 0,
|
||||
CAPTURING_PHASE: 1,
|
||||
AT_TARGET: 2,
|
||||
BUBBLING_PHASE: 3,
|
||||
composedPath: () => [],
|
||||
initEvent: () => {},
|
||||
preventDefault: () => {},
|
||||
stopImmediatePropagation: () => {},
|
||||
stopPropagation: () => {},
|
||||
});
|
||||
// 这里可以根据进度做相应的处理，例如更新UI等
|
||||
})
|
||||
.then((data: any) => {
|
||||
console.log(data);
|
||||
resolve(data);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
reject(error);
|
||||
});
|
||||
// CommonApi.upload(formData)
|
||||
// .then((data) => {
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// reject(error);
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传进度
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
const handleProgress = (event: UploadProgressEvent) => {
|
||||
progressPercent.value = event.percent;
|
||||
if (progressPercent.value >= 100) {
|
||||
showProgress.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 上传成功
|
||||
*/
|
||||
const handleSuccess = (fileInfo: string) => {
|
||||
ElMessage.success("上传成功");
|
||||
modelValue.value = [...modelValue.value, fileInfo];
|
||||
};
|
||||
|
||||
const handleError = (error: any) => {
|
||||
ElMessage.error("上传失败");
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除文件
|
||||
*/
|
||||
function handleRemove(fileUrl: string) {
|
||||
// CommonApi.delete(fileUrl).then(() => {
|
||||
modelValue.value = modelValue.value.filter((url) => url !== fileUrl);
|
||||
// });
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
*/
|
||||
function handleDownload(file: UploadUserFile) {
|
||||
// const { url, name } = file;
|
||||
// if (url) {
|
||||
// CommonApi.download(url, name);
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-upload-list__item .el-icon--close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 5px;
|
||||
color: var(--el-text-color-regular);
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
transition: opacity var(--el-transition-duration);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
:deep(.el-upload-list) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.el-upload-list__item) {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -51,6 +51,7 @@ const modalConfig: IModalConfig<addRequest> = {
|
|||
attrs: {
|
||||
placeholder: "请输入版本号",
|
||||
},
|
||||
watch: () => { }
|
||||
},
|
||||
{
|
||||
type: "radio",
|
||||
|
|
@ -80,6 +81,7 @@ const modalConfig: IModalConfig<addRequest> = {
|
|||
attrs: {
|
||||
placeholder: "请上传版本文件",
|
||||
},
|
||||
hidden: true,
|
||||
initialValue: [],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -42,10 +42,18 @@
|
|||
</page-content>
|
||||
|
||||
<!-- 新增 -->
|
||||
<page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
|
||||
<page-modal
|
||||
ref="addModalRef"
|
||||
@form-data-change="handleFormDataChange"
|
||||
:modal-config="addModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
>
|
||||
<template #url="scope">
|
||||
<FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
|
||||
<!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
|
||||
<version-file
|
||||
:version="version"
|
||||
v-model="scope.formData[scope.prop]"
|
||||
v-bind="scope.attrs"
|
||||
></version-file>
|
||||
</template>
|
||||
</page-modal>
|
||||
|
||||
|
|
@ -56,14 +64,18 @@
|
|||
@submit-click="handleSubmitClick"
|
||||
>
|
||||
<template #url="scope">
|
||||
<FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
|
||||
<!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
|
||||
<version-file
|
||||
:version="version"
|
||||
v-model="scope.formData[scope.prop]"
|
||||
v-bind="scope.attrs"
|
||||
></version-file>
|
||||
</template>
|
||||
</page-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import versionFile from "./components/version-file.vue";
|
||||
import VersionApi from "@/api/system/version";
|
||||
import type { IObject, IOperatData } from "@/components/CURD/types";
|
||||
import usePage from "@/components/CURD/usePage";
|
||||
|
|
@ -73,6 +85,19 @@ import editModalConfig from "./config/edit";
|
|||
import searchConfig from "./config/search";
|
||||
import { returnOptionsLabel } from "./config/config";
|
||||
|
||||
let version = ref<string | number>("");
|
||||
function handleFormDataChange(type: string, value: string | number) {
|
||||
version.value = value;
|
||||
if (type === "version" && value !== "") {
|
||||
addModalConfig.formItems[5].hidden = false;
|
||||
return;
|
||||
}
|
||||
if (type === "version" && value == "") {
|
||||
addModalConfig.formItems[5].hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
const refVersionFile = ref<any>();
|
||||
const {
|
||||
searchRef,
|
||||
contentRef,
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
<el-radio-button :value="1">员工</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item prop="merchantName" v-if="state.loginForm.loginType == 1">
|
||||
<el-form-item prop="staffUserName" v-if="state.loginForm.loginType == 1">
|
||||
<el-input
|
||||
v-model="state.loginForm.merchantName"
|
||||
v-model="state.loginForm.staffUserName"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="商户号"
|
||||
|
|
@ -97,14 +97,14 @@ const state = reactive({
|
|||
// rememberMe: false,
|
||||
code: "",
|
||||
uuid: "",
|
||||
merchantName: "",
|
||||
staffUserName: "",
|
||||
loginType: 0,
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: "blur", message: "用户名不能为空" }],
|
||||
password: [{ required: true, trigger: "blur", message: "密码不能为空" }],
|
||||
code: [{ required: true, trigger: "change", message: "验证码不能为空" }],
|
||||
merchantName: [{ required: true, trigger: "change", message: "商户号不能为空" }],
|
||||
staffUserName: [{ required: true, trigger: "change", message: "商户号不能为空" }],
|
||||
},
|
||||
loading: false,
|
||||
redirect: undefined,
|
||||
|
|
@ -120,8 +120,8 @@ onMounted(() => {
|
|||
|
||||
let getinfo = localStorage.getItem("MerchantId");
|
||||
let info = JSON.parse(getinfo);
|
||||
if (info && info.merchantName) {
|
||||
state.loginForm.merchantName = info.merchantName;
|
||||
if (info && info.staffUserName) {
|
||||
state.loginForm.staffUserName = info.staffUserName;
|
||||
state.loginForm.username = info.username;
|
||||
}
|
||||
});
|
||||
|
|
@ -144,7 +144,7 @@ function getCookie() {
|
|||
password: password,
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
||||
code: "",
|
||||
merchantName: "",
|
||||
staffUserName: "",
|
||||
loginType: 0,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue