wangfukang
5 days ago
8 changed files with 388 additions and 16 deletions
@ -0,0 +1,191 @@ |
|||
<template> |
|||
<div style="position: relative"> |
|||
<Upload |
|||
:action="uploadFileUrl" |
|||
:headers="accessToken" |
|||
:on-success="handleSuccess" |
|||
:on-error="handleError" |
|||
:max-size="512000" |
|||
:on-exceeded-size="handleMaxSize" |
|||
:before-upload="beforeUpload" |
|||
:format="['apk', 'ipa']" |
|||
: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>点击这里或将APP安装包拖拽到这里上传</p> |
|||
<p style="color: #999; margin-top: 8px">支持 apk、ipa 格式，最大 500MB</p> |
|||
</div> |
|||
</Upload> |
|||
<Form :model="form" :label-width="100" style="margin-top: 24px"> |
|||
<FormItem label="原始链接"> |
|||
<Input |
|||
v-model="form.url" |
|||
readonly |
|||
placeholder="请先上传APP安装包" |
|||
style="width: 520px" |
|||
/> |
|||
</FormItem> |
|||
<FormItem label="CNAME域名"> |
|||
<Input |
|||
v-model="cnameDomain" |
|||
placeholder="请输入已绑定OSS的自定义域名，如 https://download.example.com" |
|||
style="width: 520px" |
|||
/> |
|||
</FormItem> |
|||
<FormItem label="官网链接"> |
|||
<Input |
|||
:value="downloadUrl" |
|||
readonly |
|||
placeholder="填写CNAME域名后自动生成可用于官网的下载链接" |
|||
style="width: 520px" |
|||
/> |
|||
<Button |
|||
type="primary" |
|||
icon="md-copy" |
|||
style="margin-left: 10px" |
|||
:disabled="!downloadUrl" |
|||
@click="copyUrl" |
|||
> |
|||
复制链接 |
|||
</Button> |
|||
</FormItem> |
|||
<FormItem label="文件名"> |
|||
<Input v-model="form.fileName" readonly style="width: 380px" /> |
|||
</FormItem> |
|||
</Form> |
|||
<Alert type="info" show-icon style="width: 650px"> |
|||
阿里云限制 APK 不能直接使用 OSS endpoint 公网分发，请先把自定义域名 CNAME 到 OSS 并在 OSS 控制台绑定，再复制官网链接替换 index.html 中的 APP_DOWNLOAD_URL。 |
|||
</Alert> |
|||
<Spin fix v-if="loading"></Spin> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
uploadFile, |
|||
checkOssSet, |
|||
} from "@/api/index"; |
|||
export default { |
|||
name: "appUpload", |
|||
data() { |
|||
return { |
|||
uploadFileUrl: uploadFile, |
|||
loading: false, |
|||
accessToken: {}, |
|||
cnameDomain: "https://static.hbkuaishi.com", |
|||
form: { |
|||
url: "", |
|||
fileName: "", |
|||
}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
downloadUrl() { |
|||
return this.buildCnameUrl(this.form.url); |
|||
}, |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.accessToken = { |
|||
accessToken: this.getStore("accessToken"), |
|||
}; |
|||
checkOssSet().then((res) => { |
|||
if (!res.success) { |
|||
this.$Modal.confirm({ |
|||
title: "系统还未配置OSS", |
|||
content: "管理员还未配置第三方OSS服务，是否现在立即去配置?", |
|||
onOk: () => { |
|||
this.$router.push({ |
|||
name: "setting", |
|||
query: { |
|||
name: "oss", |
|||
}, |
|||
}); |
|||
}, |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
beforeUpload(file) { |
|||
const name = file.name ? file.name.toLowerCase() : ""; |
|||
if (!name.endsWith(".apk") && !name.endsWith(".ipa")) { |
|||
this.$Message.error("只能上传apk或ipa格式的APP安装包"); |
|||
return false; |
|||
} |
|||
this.loading = true; |
|||
return true; |
|||
}, |
|||
handleSuccess(res, file, fileList) { |
|||
this.loading = false; |
|||
if (res.success) { |
|||
this.$Message.success("上传文件 " + file.name + " 成功"); |
|||
this.form.url = 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.loading = false; |
|||
this.$Message.error(error.toString()); |
|||
}, |
|||
handleFormatError(file) { |
|||
this.$Message.error(file.name + " 不是apk或ipa格式文件"); |
|||
}, |
|||
handleMaxSize(file) { |
|||
this.loading = false; |
|||
this.$Notice.warning({ |
|||
title: "文件大小过大", |
|||
desc: "文件 " + file.name + " 超过 500MB，请压缩或重新选择", |
|||
}); |
|||
}, |
|||
buildCnameUrl(url) { |
|||
const domain = this.normalizeDomain(this.cnameDomain); |
|||
if (!url || !domain) { |
|||
return ""; |
|||
} |
|||
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; |
|||
}, |
|||
copyUrl() { |
|||
if (!this.downloadUrl) { |
|||
this.$Message.warning("请先上传APP安装包并填写CNAME域名"); |
|||
return; |
|||
} |
|||
this.$copyText(this.downloadUrl).then(() => { |
|||
this.$Message.success("复制链接成功"); |
|||
}, () => { |
|||
this.$Message.warning("复制链接失败，请手动复制"); |
|||
}); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
</style> |
|||
Loading…
Reference in new issue