feature: change pic repo

2024-11-24 19:10:34 +08:00 · 2020-08-29 11:55:16 +08:00 · 2020-08-29 11:55:16 +08:00 · 2e6b0b00db
commit 2e6b0b00db
parent 849f6629da
7 changed files with 121 additions and 84 deletions
--- a/package.json
+++ b/package.json
@ -1,42 +1,43 @@
 {
-    "name": "vue-md",
-    "version": "1.3.6",
-    "private": true,
-    "homepage": "https://doocs.gitee.io/md",
-    "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint",
-        "test:unit": "vue-cli-service test:unit"
-    },
-    "dependencies": {
-        "axios": "^0.19.1",
-        "codemirror": "^5.50.2",
-        "core-js": "^3.4.4",
-        "element-ui": "^2.13.0",
-        "jquery": "^3.4.1",
-        "juice": "^6.0.0",
-        "markdown": "^0.5.0",
-        "marked": "^0.8.0",
-        "prettier": "^2.0.5",
-        "prettify": "^0.1.7",
-        "vue": "^2.6.10",
-        "vue-router": "^3.1.3",
-        "vuex": "^3.1.2"
-    },
-    "devDependencies": {
-        "@vue/cli-plugin-babel": "^4.1.0",
-        "@vue/cli-plugin-eslint": "^4.1.0",
-        "@vue/cli-plugin-unit-jest": "^4.1.0",
-        "@vue/cli-service": "^4.1.0",
-        "@vue/eslint-config-standard": "^4.0.0",
-        "@vue/test-utils": "1.0.0-beta.29",
-        "babel-eslint": "^10.0.3",
-        "eslint": "^5.16.0",
-        "eslint-plugin-vue": "^5.0.0",
-        "less-loader": "^6.0.0",
-        "node-sass": "^4.12.0",
-        "sass-loader": "^8.0.0",
-        "vue-template-compiler": "^2.6.10"
-    }
+  "name": "vue-md",
+  "version": "1.3.6",
+  "private": true,
+  "homepage": "https://doocs.gitee.io/md",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit"
+  },
+  "dependencies": {
+    "axios": "^0.19.1",
+    "codemirror": "^5.50.2",
+    "core-js": "^3.4.4",
+    "element-ui": "^2.13.0",
+    "jquery": "^3.4.1",
+    "juice": "^6.0.0",
+    "markdown": "^0.5.0",
+    "marked": "^0.8.0",
+    "prettier": "^2.0.5",
+    "prettify": "^0.1.7",
+    "uuid": "^8.3.0",
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.3",
+    "vuex": "^3.1.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.1.0",
+    "@vue/cli-plugin-eslint": "^4.1.0",
+    "@vue/cli-plugin-unit-jest": "^4.1.0",
+    "@vue/cli-service": "^4.1.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "less-loader": "^6.0.0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.0",
+    "vue-template-compiler": "^2.6.10"
+  }
 }
--- a/src/api/fetch.js
+++ b/src/api/fetch.js
@ -20,7 +20,7 @@ service.interceptors.request.use(
 );

 service.interceptors.response.use(res => {
-    return res.data.success ? res.data : Promise.reject(res.data);
+    return res.data ? res.data : Promise.reject(res);
 }, error => Promise.reject(error));

 export default service;
--- a/src/api/file.js
+++ b/src/api/file.js
@ -1,11 +1,37 @@
 import fetch from './fetch';
+import { v4 as uuidv4 } from 'uuid';
+const fileUploadConfig = {
+    username: 'filess',
+    repo: 'images',
+    access_tokens: [
+        'c849e371c79eb9f6d9ebcf28983227bed284d92d',
+        'a447236ffceb656eaab4b0fb6367851f8e5e1e93',
+        '12adcf31e54a8b3710a52de2ac46f3d42f57ce22',
+        '8187af6fd468bdaa852972be1a864ce6e6a592e7',
+        '6412beee93f641b709fcfc3d6b6b8b96a0a7a81c',
+        '6fec856c7462b63a2a2148f7b25fe2c333a42225'
+    ]
+}


-function fileUpload(data) {
+function fileUpload(content, fileName) {
+    const date = new Date();
+    const dir = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
+    const uuid = uuidv4(); 
+    const token = fileUploadConfig.access_tokens[Math.round(6 * Math.random())];
+    const dateFilename = new Date().getTime() + '-' + uuid + '.' + fileName.split('.')[1];
+    const url = `https://api.github.com/repos/${fileUploadConfig.username}/${fileUploadConfig.repo}/contents/${dir}/${dateFilename}?access_token=${token}`;
+
    return fetch({
-        url: 'https://imgkr.com/api/files/upload',
-        method: 'post',
-        data: data
+        url,
+        method: 'put',
+        headers: {
+            'Authorization': 'token ' + token
+        },
+        data: {
+            message: 'Upload image by https://github.com/doocs/md',
+            content: content
+        }
    })
 }

--- a/src/assets/scripts/uploadImageFile.js
+++ b/src/assets/scripts/uploadImageFile.js
@ -1,20 +1,30 @@
 import fileApi from '../../api/file';
+const githubResourceUrl = 'raw.githubusercontent.com/filess/images/master/';
+const cdnResourceUrl = 'cdn.jsdelivr.net/gh/filess/images/';

 export function uploadImgFile(file) {
+        
    return new Promise((resolve, reject)=> {
        const checkImageResult = isImageIllegal(file);

        if (checkImageResult) {
            reject(checkImageResult);
        } else {
-            let fd = new FormData();
+            const imgFile = new FileReader();
+            imgFile.readAsDataURL(file);
+            
+            imgFile.onload = function() {
+                const base64Cotent = this.result.split(',').pop();
+
+                fileApi.fileUpload(base64Cotent, file.name).then(res=> {
+                    const imageUrl = res.content.download_url.replace(githubResourceUrl, cdnResourceUrl)
+                    
+                    resolve(imageUrl);
+                }).catch(err => {
+                    console.log(err.message)
+                })
+            }

-            fd.append('file', file);
-            fileApi.fileUpload(fd).then(res => {
-                resolve(res);
-            }).catch(err => {
-                console.log(err.message)
-            })
        }
    });
 }
--- a/src/components/CodemirrorEditor/header.vue
+++ b/src/components/CodemirrorEditor/header.vue
@ -1,14 +1,14 @@
 <template>
    <el-container class="top is-dark">
        <!-- 图片上传 -->
-        <!-- <el-upload class="header__item" action="https://imgkr.com/api/files/upload"
+        <el-upload class="header__item" action="https://imgkr.com/api/files/upload"
            :headers="{'Content-Type': 'multipart/form-data'}"
            :show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
            :before-upload="beforeUpload">
            <el-tooltip :effect="effect" content="上传图片" placement="bottom-start">
            <i class="el-icon-upload" size="medium"></i>
            </el-tooltip>
-        </el-upload> -->
+        </el-upload>
        <!-- 下载文本文档 -->
        <el-tooltip class="header__item" :effect="effect" content="下载编辑框Markdown文档" placement="bottom-start">
            <i class="el-icon-download" size="medium" @click="$emit('downLoad')"></i>
--- a/src/components/CodemirrorEditor/rightClickMenu.vue
+++ b/src/components/CodemirrorEditor/rightClickMenu.vue
@ -33,10 +33,10 @@ export default {
    data() {
        return {
            list: [
-                // {
-                //     text: '上传图片',
-                //     key: 'insertPic'
-                // },
+                {
+                    text: '上传图片',
+                    key: 'insertPic'
+                },
                {
                    text: '插入表格',
                    key: 'insertTable'
--- a/src/view/CodemirrorEditor.vue
+++ b/src/view/CodemirrorEditor.vue
@ -123,28 +123,28 @@ export default {
            });

            // 粘贴上传图片并插入
-            // this.editor.on('paste', (cm, e) => {
-            //     if (!(e.clipboardData && e.clipboardData.items) || this.isImgLoading) {
-            //         return;
-            //     }
-            //     for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) {
-            //         let item = e.clipboardData.items[i]
-            //         if (item.kind === 'file') {
-            //             this.isImgLoading = true;
-            //             const pasteFile = item.getAsFile()
-            //             uploadImgFile(pasteFile).then(res=> {
-            //                 this.uploaded(res)
-            //             }).catch(err=> {
-            //                 this.$message({
-            //                     showClose: true,
-            //                     message: err,
-            //                     type: 'error'
-            //                 });
-            //             });
-            //             this.isImgLoading = false;
-            //         }
-            //     }
-            // });
+            this.editor.on('paste', (cm, e) => {
+                if (!(e.clipboardData && e.clipboardData.items) || this.isImgLoading) {
+                    return;
+                }
+                for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) {
+                    let item = e.clipboardData.items[i]
+                    if (item.kind === 'file') {
+                        this.isImgLoading = true;
+                        const pasteFile = item.getAsFile()
+                        uploadImgFile(pasteFile).then(res=> {
+                            this.uploaded(res)
+                        }).catch(err=> {
+                            this.$message({
+                                showClose: true,
+                                message: err,
+                                type: 'error'
+                            });
+                        });
+                        this.isImgLoading = false;
+                    }
+                }
+            });

            this.editor.on('mousedown', () => {
                this.$store.commit('setRightClickMenuVisible', false);
@ -183,7 +183,7 @@ export default {
        },
        // 图片上传结束
        uploaded(response) {
-            if (!response || !response.success) {
+            if (!response) {
                this.$message({
                    showClose: true,
                    message: '上传图片未知异常',
@ -193,7 +193,7 @@ export default {
            }
            // 上传成功，获取光标
            const cursor = this.editor.getCursor();
-            const imageUrl = response.data;
+            const imageUrl = response;
            const markdownImage = `![](${imageUrl})`;
            // 将 Markdown 形式的 URL 插入编辑框光标所在位置
            this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);