|
|
@@ -0,0 +1,312 @@
|
|
|
+<template>
|
|
|
+ <el-container>
|
|
|
+ <el-main>
|
|
|
+ <el-card shadow="never" header="存储配置" class="borderNone">
|
|
|
+ <el-form :model="sys" :rules="rules" ref="form" label-position="top">
|
|
|
+ <div class="tip-container">
|
|
|
+ <el-alert title="文件将存储在本地服务器,默认保存在 public/upload 目录,文件以 HASH 命名。" show-icon description="文件存储的目录需要有读写权限,有足够的存储空间。特别注意,本地存储暂不支持图片压缩!" type="info" :closable="false" v-if="typeChange == 'public'" />
|
|
|
+ <el-alert title="文件将上传到 七牛云 存储" description="对象存储需要配置为公开访问的 Bucket 空间" show-icon type="info" :closable="false" v-if="typeChange == 'qiniu'" />
|
|
|
+ <el-alert title="文件将上传到 阿里云 OSS 存储,需要配置 OSS 公开访问及跨域策略" description="配置跨域访问 CORS 规则,设置:来源 Origin 为 *,允许 Methods 为 POST,允许 Headers 为 *" show-icon type="info" :closable="false" v-if="typeChange == 'oss'" />
|
|
|
+ <el-alert title="文件将上传到 腾讯云 COS 存储,需要配置 COS 公有读私有写访问权限及跨域策略" description="配置跨域访问 CORS 规则,设置来源 Origin 为 *,允许 Methods 为 POST,允许 Headers 为 *" show-icon type="info" :closable="false" v-if="typeChange == 'cos'" />
|
|
|
+ </div>
|
|
|
+ <el-form-item label="默认上传方式:" prop="type" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-radio-group v-model="sys.type" @change="checkType">
|
|
|
+ <el-radio label="public" border>本地 (不推荐)</el-radio>
|
|
|
+ <el-radio label="qiniu" border>七牛云</el-radio>
|
|
|
+ <el-radio label="oss" border>阿里云</el-radio>
|
|
|
+ <el-radio label="cos" border>腾讯云</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="允许类型:" prop="allow_exts" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.allow_exts" placeholder="请输入允许类型"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">设置系统允许上传文件的后缀,多个以英文逗号隔开如:png,jpg,rar,doc,未设置允许上传的后缀</div>
|
|
|
+ </el-form-item>
|
|
|
+ <div v-if="typeChange == 'public'">
|
|
|
+ </div>
|
|
|
+ <div v-if="typeChange == 'qiniu'">
|
|
|
+ <el-form-item label="访问协议:" prop="qiniu_http_protocol" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-radio-group v-model="sys.qiniu_http_protocol">
|
|
|
+ <el-radio label="http" border>HTTP</el-radio>
|
|
|
+ <el-radio label="https" border>HTTPS</el-radio>
|
|
|
+ <el-radio label="auto" border>AUTO</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">七牛云存储访问协议,其中 HTTPS 需要配置证书才能使用( AUTO 为相对协议 )</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="存储区域:" prop="qiniu_region" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-select v-model="sys.qiniu_region" style="width: 100%;" placeholder="请选择存储区域" size="large">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in qiniuRegin"
|
|
|
+ :key="index"
|
|
|
+ :label="item"
|
|
|
+ :value="index"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">七牛云存储空间所在区域,需要严格对应储存所在区域才能上传文件</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="空间名称:" prop="qiniu_bucket" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.qiniu_bucket" placeholder="请输入空间名称"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">填写七牛云存储空间名称,如:static</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="访问域名:" prop="qiniu_http_domain" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.qiniu_http_domain" placeholder="请输入访问域名"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">填写七牛云存储访问域名,如:static.qiniu.tempfood.cn</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="访问密钥:" prop="qiniu_access_key" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.qiniu_access_key" placeholder="请输入访问密钥"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">可以在 [ 七牛云 > 个人中心 ] 设置并获取到访问密钥</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="安全密钥:" prop="qiniu_secret_key" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.qiniu_secret_key" placeholder="请输入安全密钥"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">可以在 [ 七牛云 > 个人中心 ] 设置并获取到安全密钥</div>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div v-if="typeChange == 'oss'">
|
|
|
+ <el-form-item label="访问协议:" prop="oss_http_protocol" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-radio-group v-model="sys.oss_http_protocol">
|
|
|
+ <el-radio label="http" size="large">HTTP</el-radio>
|
|
|
+ <el-radio label="https" size="large">HTTPS</el-radio>
|
|
|
+ <el-radio label="auto" size="large">AUTO</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">阿里云OSS存储访问协议,其中 HTTPS 需要配置证书才能使用(AUTO 为相对协议)</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="存储区域:" prop="oss_region" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-select v-model="sys.oss_region" style="width: 100%;" placeholder="请选择存储区域" size="large">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in ossRegin"
|
|
|
+ :key="index"
|
|
|
+ :label="item"
|
|
|
+ :value="index"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">阿里云存储空间所在区域,需要严格对应储存所在区域才能上传文件</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="空间名称:" prop="oss_bucket" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.oss_bucket" placeholder="请输入空间名称"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">填写阿里云存储空间名称,如:static</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="访问域名:" prop="oss_http_domain" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.oss_http_domain" placeholder="请输入访问域名"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">填写阿里云存储访问域名,如:static.qiniu.tempfood.cn</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="访问密钥:" prop="oss_access_key" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.oss_access_key" placeholder="请输入访问密钥"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">可以在 [ 阿里云 > 个人中心 ] 设置并获取到访问密钥</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="安全密钥:" prop="oss_secret_key" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.oss_secret_key" placeholder="请输入安全密钥"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">可以在 [ 阿里云 > 个人中心 ] 设置并获取到安全密钥</div>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div v-if="typeChange == 'cos'">
|
|
|
+ <el-form-item label="访问协议:" prop="cos_http_protocol" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-radio-group v-model="sys.cos_http_protocol">
|
|
|
+ <el-radio label="http" size="large">HTTP</el-radio>
|
|
|
+ <el-radio label="https" size="large">HTTPS</el-radio>
|
|
|
+ <el-radio label="auto" size="large">AUTO</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">阿里云OSS存储访问协议,其中 HTTPS 需要配置证书才能使用(AUTO 为相对协议)</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="存储区域:" prop="cos_region" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-select v-model="sys.cos_region" style="width: 100%;" placeholder="请选择存储区域" size="large">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in cosRegin"
|
|
|
+ :key="index"
|
|
|
+ :label="item"
|
|
|
+ :value="index"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">腾讯云存储空间所在区域,需要严格对应储存所在区域才能上传文件</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="空间名称:" prop="cos_bucket" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.cos_bucket" placeholder="请输入空间名称"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">填写腾讯云存储空间名称,如:static</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="访问域名:" prop="cos_http_domain" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.cos_http_domain" placeholder="请输入访问域名"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">填写腾讯云存储访问域名,如:static.tempfood.cn</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="访问密钥:" prop="cos_access_key" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.cos_access_key" placeholder="请输入访问密钥"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">可以在 [ 腾讯云 > 个人中心 ] 设置并获取到访问密钥</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="安全密钥:" prop="cos_secret_key" class="label-item">
|
|
|
+ <el-col :span="11" :xs="24">
|
|
|
+ <el-input v-model="sys.cos_secret_key" placeholder="请输入安全密钥"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <div class="el-form-item-msg">可以在 [ 腾讯云 > 个人中心 ] 设置并获取到安全密钥</div>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ </el-main>
|
|
|
+ <el-footer>
|
|
|
+ <el-button type="primary" size="large" :loading="isSaveing" @click="saveForm">保存</el-button>
|
|
|
+ </el-footer>
|
|
|
+ </el-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isSaveing: false,
|
|
|
+ sys: {},
|
|
|
+ configList: [],
|
|
|
+ rules: {
|
|
|
+ type: [
|
|
|
+ { required: true, message: '请选择上传方式', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ allow_exts: [
|
|
|
+ { required: true, message: '请输入允许类型', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ qiniu_http_protocol: [
|
|
|
+ { required: true, message: '请选择访问协议', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ oss_http_protocol: [
|
|
|
+ { required: true, message: '请选择访问协议', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ cos_http_protocol: [
|
|
|
+ { required: true, message: '请选择访问协议', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ qiniu_region: [
|
|
|
+ { required: true, message: '请选择存储区域', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ oss_region: [
|
|
|
+ { required: true, message: '请选择存储区域', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ cos_region: [
|
|
|
+ { required: true, message: '请选择存储区域', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ qiniu_bucket: [
|
|
|
+ { required: true, message: '请输入空间名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ oss_bucket: [
|
|
|
+ { required: true, message: '请输入空间名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ cos_bucket: [
|
|
|
+ { required: true, message: '请输入空间名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ qiniu_http_domain: [
|
|
|
+ { required: true, message: '请输入访问域名', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ oss_http_domain: [
|
|
|
+ { required: true, message: '请输入访问域名', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ cos_http_domain: [
|
|
|
+ { required: true, message: '请输入访问域名', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ qiniu_access_key: [
|
|
|
+ { required: true, message: '请输入访问密钥', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ oss_access_key: [
|
|
|
+ { required: true, message: '请输入访问密钥', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ cos_access_key: [
|
|
|
+ { required: true, message: '请输入访问密钥', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ qiniu_secret_key: [
|
|
|
+ { required: true, message: '请输入安全密钥', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ oss_secret_key: [
|
|
|
+ { required: true, message: '请输入安全密钥', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ cos_secret_key: [
|
|
|
+ { required: true, message: '请输入安全密钥', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ typeChange:"public",
|
|
|
+ ossRegin:[],
|
|
|
+ cosRegin:[],
|
|
|
+ qiniuRegin: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getConfig();
|
|
|
+ this.getRegin();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checkType(val){
|
|
|
+ this.typeChange = val;
|
|
|
+ },
|
|
|
+ saveForm() {
|
|
|
+ this.isSaveing = true;
|
|
|
+ this.$refs.form.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ var result = await this.$API.setting.configSave.post({type:"storage",data: this.sys });
|
|
|
+ this.isSaveing = false;
|
|
|
+ if(result.code == 0)
|
|
|
+ {
|
|
|
+ this.$message.error(result.msg);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.$message.success(result.msg);
|
|
|
+ } else {
|
|
|
+ this.isSaveing = false;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async getConfig() {
|
|
|
+ var result = await this.$API.setting.config.get({ type: "storage" });
|
|
|
+ if (result.code == 0) {
|
|
|
+ this.$message.error(result.msg);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.typeChange = result.data.type;
|
|
|
+ this.sys = result.data;
|
|
|
+ },
|
|
|
+ async getRegin() {
|
|
|
+ var result = await this.$API.setting.regin.get();
|
|
|
+ if (result.code == 0) {
|
|
|
+ this.$message.error(result.msg);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.ossRegin = result.data.oss;
|
|
|
+ this.cosRegin = result.data.cos;
|
|
|
+ this.qiniuRegin = result.data.qiniu;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+</style>
|