school-manage/src/views/sys/upApp/upApp.vue

<template>
	<div style="position: relative">
		<Upload :action="uploadFileUrl" :headers="accessToken" :data="uploadData" :on-success="handleSuccess"
			:on-error="handleError" :max-size="204800" :before-upload="beforeUpload"
			:format="['wgt']" :on-format-error="handleFormatError" type="drag" ref="up">
			<div style="padding: 20px 0">
				<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
				<p>点击这里或将wgt包拖拽到这里上传</p>
			</div>
		</Upload>
		<Form ref="form" :model="form" :label-width="100" :rules="formValidate" style="margin-top: 24px">
			<FormItem label="版本号" prop="version">
				<Input v-model="form.version" placeholder="请输入版本号，如1.0.1" style="width: 380px" />
			</FormItem>
			<FormItem label="wgt包地址" prop="url">
				<Input v-model="form.url" readonly placeholder="请先上传wgt包" style="width: 520px" />
			</FormItem>
			<FormItem label="CNAME域名">
				<Input v-model="cnameDomain" placeholder="请输入已绑定OSS的自定义域名" style="width: 520px" />
			</FormItem>
			<FormItem label="文件名">
				<Input v-model="form.fileName" readonly style="width: 380px" />
			</FormItem>
		</Form>
		<div>
			<Button type="primary" :loading="submitLoading" @click="handelSubmit">提交</Button>
		</div>
		<Spin fix v-if="loading"></Spin>
	</div>
</template>

<script>
	import {
		uploadAppUpdateFile,
		checkOssSet,
		getAppUpdateSet,
		editAppUpdateSet,
	} from "@/api/index";
	export default {
		name: "upApp",
		data() {
			return {
				uploadFileUrl: uploadAppUpdateFile,
				loading: false,
				submitLoading: false,
				accessToken: {},
				uploadData: {},
				cnameDomain: "https://static.hbkuaishi.com",
				form:{
					url: "",
					version: "",
					fileName: "",
				},
				formValidate: {
					version: [{ required: true, message: "请输入版本号", trigger: "blur" }],
					url: [{ required: true, message: "请上传wgt包", trigger: "change" }],
				},
			};
		},
		methods: {
			init() {
				this.accessToken = {
					accessToken: this.getStore("accessToken"),
				};
				this.initAppUpdateSet();
				checkOssSet().then((res) => {
					if (!res.success) {
						this.$Modal.confirm({
							title: "系统还未配置OSS",
							content: "管理员还未配置第三方OSS服务，是否现在立即去配置?",
							onOk: () => {
								this.$router.push({
									name: "setting",
									query: {
										name: "oss"
									},
								});
							},
						});
					}
				});
			},
			initAppUpdateSet() {
				this.loading = true;
				getAppUpdateSet().then((res) => {
					this.loading = false;
					if (res.result) {
						for (let attr in res.result) {
							if (res.result[attr] == null) {
								res.result[attr] = "";
							}
						}
						this.form = res.result;
						this.form.url = this.buildCnameUrl(this.form.url);
					}
				});
			},
			beforeUpload(file) {
				if (!file.name || file.name.toLowerCase().lastIndexOf(".wgt") !== file.name.length - 4) {
					this.$Message.error("只能上传wgt格式的热更新包");
					return false;
				}
				return true;
			},
			handleSuccess(res, file, fileList) {
				if (res.success) {
					this.$Message.success("上传文件 " + file.name + " 成功");
					this.form.url = this.buildCnameUrl(res.result);
					this.form.fileName = file.name;
				} else {
					file.percentage = 0;
					file.status = "fail";
					file.name += "（上传失败）";
					this.$Message.error(res.message);
				}
			},
			handleError(error, file, fileList) {
				this.$Message.error(error.toString());
			},
			handleFormatError(file) {
				this.$Message.error(file.name + " 不是wgt格式文件");
			},
			buildCnameUrl(url) {
				const domain = this.normalizeDomain(this.cnameDomain);
				if (!url || !domain) {
					return url || "";
				}
				try {
					const parsed = new URL(url);
					return domain + parsed.pathname + parsed.search + parsed.hash;
				} catch (e) {
					const path = url.charAt(0) === "/" ? url : "/" + url;
					return domain + path;
				}
			},
			normalizeDomain(domain) {
				let value = domain ? domain.trim() : "";
				if (!value) {
					return "";
				}
				value = value.replace(/\/+$/, "");
				if (!/^https?:\/\//i.test(value)) {
					value = "https://" + value;
				}
				return value;
			},
			handelSubmit() {
				this.$refs.form.validate((valid) => {
					if (!valid) {
						return;
					}
					this.submitLoading = true;
					editAppUpdateSet(this.form).then((res) => {
						this.submitLoading = false;
						if (res.success) {
							this.$Message.success("保存成功");
						}
					});
				});
			},
		},
		mounted() {
			this.init();
		},
	};
</script>

<style lang="less">
</style>