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

feat: upload config

src/api/file.js

@@ -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 {
-    const dir = date.getFullYear() + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0');
+        method,
+        token,
+        url
+    } = store.getters['imageApi/config'];
     const uuid = uuidv4();
     const dateFilename = new Date().getTime() + '-' + uuid + '.' + filename.split('.')[1];
-    const {
+    const uploadUrl = url + dateFilename;
-        username,
-        repo,
-        token
-    } = getConfiguration()
-    const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/${dateFilename}`
 
     return fetch({
-        url,
+        url: uploadUrl,
-        method: 'put',
+        method,
         headers: {
             'Authorization': 'token ' + token
         },

src/assets/scripts/renderers/wx-renderer.js

@@ -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

src/assets/scripts/uploadImageFile.js

@@ -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)
             })
         }
     });

src/components/CodemirrorEditor/uploadImgDialog.vue

@@ -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")) {
+        if (localStorage.getItem("githubConfig")) {
-            this.formGitHub = JSON.parse(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>

src/store/imageApi.js

@@ -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
+}

src/store/index.js

@@ -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
+    }
 })