Merge pull request #30 from doocs/feature-upload-config

feat: upload config
This commit is contained in:
Yang Libin 2020-09-08 21:32:24 +08:00 committed by GitHub
commit 6360325ef0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 93 additions and 59 deletions

View File

@ -1,61 +1,22 @@
import fetch from './fetch';
import store from '../store/index';
import {
v4 as uuidv4
} from 'uuid';
const fileUploadConfig = {
username: 'filess',
repo: 'images',
accessToken: [
'7715d7ca67b5d3837cfdoocsmde8c38421815aa423510af',
'c411415bf95dbe39625doocsmd5047ba9b7a2a6c9642abe',
'2821cd8819fa345c053doocsmdca86ac653f8bc20db1f1b',
'445f0dae46ef1f2a4d6doocsmdc797301e94797b4750a4c',
'cc1d0c1426d0fd0902bdoocsmdd2d7184b14da61b86ec46',
'b67e9d15cb6f910492fdoocsmdac6b44d379c953bb19eff',
'618c4dc2244ccbbc088doocsmd125d17fd31b7d06a50cf3',
'a4b581732e1c1507458doocsmdc5b223b27dae5e2e16a55'
]
}
function getConfiguration() {
const imgHost = localStorage.getItem("ImgHost") || 'default'
// Default
let token = fileUploadConfig.accessToken[Math.floor(Math.random() * fileUploadConfig.accessToken.length)].replace('doocsmd', '')
let username = fileUploadConfig.username
let repo = fileUploadConfig.repo
// GitHub
if (imgHost === 'github' && localStorage.getItem("GitHubConfig")) {
const githubConfg = JSON.parse(localStorage.getItem("GitHubConfig"))
const repoUrl = githubConfg.repo.replace("https://github.com/", "").replace("http://github.com/", "").replace("github.com/", "").split("/")
token = githubConfg.accessToken
username = repoUrl[0]
repo = repoUrl[1]
}
return {
username,
repo,
token
}
}
function fileUpload(content, filename) {
const date = new Date();
const dir = date.getFullYear() + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0');
const {
method,
token,
url
} = store.getters['imageApi/config'];
const uuid = uuidv4();
const dateFilename = new Date().getTime() + '-' + uuid + '.' + filename.split('.')[1];
const {
username,
repo,
token
} = getConfiguration()
const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/${dateFilename}`
const uploadUrl = url + dateFilename;
return fetch({
url,
method: 'put',
url: uploadUrl,
method,
headers: {
'Authorization': 'token ' + token
},

View File

@ -1,5 +1,4 @@
import marked from 'marked';
import store from '../../../store/index';
const WxRenderer = function (opts) {
this.opts = opts
let ENV_STRETCH_IMAGE = true

View File

@ -15,11 +15,12 @@ export function uploadImgFile(file) {
imgFile.onload = function () {
const base64Content = this.result.split(',').pop();
fileApi.fileUpload(base64Content, file.name).then(res => {
const imageUrl = res.content.download_url.replace(githubResourceUrl, cdnResourceUrl);
resolve(imageUrl);
}).catch(err => {
console.log(err.message)
reject(err.message)
})
}
});

View File

@ -18,10 +18,10 @@
</el-tab-pane>
<el-tab-pane class="github-panel" label="GitHub 图床" name="github">
<el-form class="setting-form" ref="form" :model="formGitHub" label-position="right" label-width="120px">
<el-form-item label="GitHub 仓库" required='true'>
<el-form-item label="GitHub 仓库" :required="true">
<el-input v-model="formGitHub.repo" placeholder="如github.com/yanglbme/resource"></el-input>
</el-form-item>
<el-form-item label="token" required='true'>
<el-form-item label="token" :required="true">
<el-input v-model="formGitHub.accessToken"
placeholder="如cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"></el-input>
<el-link type="primary"
@ -69,8 +69,8 @@ export default {
};
},
created() {
if (localStorage.getItem("GitHubConfig")) {
this.formGitHub = JSON.parse(localStorage.getItem("GitHubConfig"));
if (localStorage.getItem("githubConfig")) {
this.formGitHub = JSON.parse(localStorage.getItem("githubConfig"));
}
if (localStorage.getItem("ImgHost")) {
this.imgHost = localStorage.getItem("ImgHost");
@ -91,7 +91,7 @@ export default {
});
return;
}
localStorage.setItem("GitHubConfig", JSON.stringify(this.formGitHub));
localStorage.setItem("githubConfig", JSON.stringify(this.formGitHub));
console.log("submit github params:", this.formGitHub);
this.$message({
message: "保存成功",
@ -106,11 +106,11 @@ export default {
this.uploadingImg = true;
uploadImgFile(file)
.then((res) => {
.then(res=> {
this.$emit("uploaded", res);
this.uploadingImg = false;
})
.catch((err) => {
.catch(err=> {
this.uploadingImg = false;
this.$message({
showClose: true,
@ -139,6 +139,15 @@ export default {
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
width: 40%;
}
/deep/ .el-upload-dragger {
width: 335px;
}
/deep/ .el-dialog__body {
padding-bottom: 50px;
}
.upload-panel {
display: flex;
flex-direction: column;
@ -159,7 +168,7 @@ export default {
}
.setting-form {
width: 70%;
width: 100%;
.el-form-item {
margin: 15px;
@ -169,4 +178,5 @@ export default {
text-align: right;
}
}
</style>

59
src/store/imageApi.js Normal file
View File

@ -0,0 +1,59 @@
const state = {
imgHost: localStorage.getItem("ImgHost") || 'default', // 默认github
default: {
username: 'filess',
repo: 'images',
method: 'put',
accessToken: [
'7715d7ca67b5d3837cfdoocsmde8c38421815aa423510af',
'c411415bf95dbe39625doocsmd5047ba9b7a2a6c9642abe',
'2821cd8819fa345c053doocsmdca86ac653f8bc20db1f1b',
'445f0dae46ef1f2a4d6doocsmdc797301e94797b4750a4c',
'cc1d0c1426d0fd0902bdoocsmdd2d7184b14da61b86ec46',
'b67e9d15cb6f910492fdoocsmdac6b44d379c953bb19eff',
'618c4dc2244ccbbc088doocsmd125d17fd31b7d06a50cf3',
'a4b581732e1c1507458doocsmdc5b223b27dae5e2e16a55'
]
},
qiniuCloud: {}
};
const getters = {
config(state) {
let token, username, repo, method;
const activeKey = state.imgHost !== 'default' && localStorage.getItem(`${state.imgHost}Config`) ? state.imgHost : 'default';
switch (activeKey) {
case 'github':
const githubConfg = JSON.parse(localStorage.getItem("githubConfig"));
const repoUrl = githubConfg.repo.replace("https://github.com/", "").replace("http://github.com/", "").replace("github.com/", "").split("/");
token = githubConfg.accessToken;
username = repoUrl[0];
repo = repoUrl[1];
method = 'put';
break;
case 'qiniuCloud':
break;
default:
token = state.default.accessToken[Math.floor(Math.random() * state.default.accessToken.length)].replace('doocsmd', '');
username = state.default.username;
repo = state.default.repo;
method = state.default.method;
break;
}
const date = new Date();
const dir = date.getFullYear() + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0');
const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/`;
return {
method,
token,
url
}
}
};
export default {
namespaced: true,
state,
getters
}

View File

@ -10,6 +10,8 @@ import {
setColor,
formatDoc
} from '../assets/scripts/util'
// module
import imageApi from './imageApi.js';
Vue.use(Vuex)
@ -155,5 +157,7 @@ export default new Vuex.Store({
state,
mutations,
actions: {},
modules: {}
modules: {
imageApi
}
})