feat: update upload method

package.json

@@ -11,7 +11,9 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "ali-oss": "^6.10.0",
     "axios": "^0.19.1",
+    "buffer-from": "^1.1.1",
     "codemirror": "^5.50.2",
     "core-js": "^3.4.4",
     "element-ui": "^2.13.0",

src/api/file.js

@@ -5,28 +5,72 @@ import {
 } from 'uuid';
 
 function fileUpload(content, filename) {
+    const fileUploadType = store.state.imgHost;
+    const activeKey = fileUploadType !== 'default' && localStorage.getItem(`${fileUploadType}Config`)
+        ? fileUploadType : 'default';
+
+    switch (activeKey) {
+        case 'aliOSS':
+            return aliOSSUploadFile(content, filename);
+        case 'default':
+            return githubUploadFile(content, filename);
+        case 'github':
+            return githubUploadFile(content, filename);
+        default:
+            break;
+    }
+}
+
+/**
+ * github 图片上传
+ * @param {*} content 
+ * @param {*} filename 
+ */
+function githubUploadFile(content, filename) {
+    const githubResourceUrl = 'raw.githubusercontent.com/filess/images/master/';
+    const cdnResourceUrl = 'cdn.jsdelivr.net/gh/filess/images/';
     const {
         method,
-        token,
+        headers,
         url
     } = store.getters['imageApi/config'];
-    const uuid = uuidv4();
+    const dateFilename = new Date().getTime() + '-' + uuidv4() + '.' + filename.split('.')[1];
-    const dateFilename = new Date().getTime() + '-' + uuid + '.' + filename.split('.')[1];
     const uploadUrl = url + dateFilename;
 
     return fetch({
         url: uploadUrl,
         method,
-        headers: {
+        headers,
-            'Authorization': 'token ' + token
-        },
         data: {
             message: 'Upload image by https://doocs.github.io/md',
             content: content
         }
-    })
+    }).then(res=> {
+        const imageUrl = res.content.download_url.replace(githubResourceUrl, cdnResourceUrl);
+
+        return imageUrl;
+    });
 }
 
+function aliOSSUploadFile(content, filename) {
+    debugger;
+    const config = store.getters['imageApi/config'];
+    const dateFilename = new Date().getTime() + '-' + uuidv4() + '.' + filename.split('.')[1];
+    const dir = config.dir + '/' + dateFilename;
+    const Buffer = require('buffer-from')
+    const buffer = Buffer(content, 'base64');
+    const OSS = require('ali-oss');
+    try {
+        const client = new OSS(config);
+
+        return client.put(dir, buffer).then(res=> {
+            console.log('aliOSSUoladFile', res);
+            return res.url;
+        })
+    } catch (e) {
+        return Promise.reject(e);
+    }
+}
 
 export default {
     fileUpload

src/assets/scripts/uploadImageFile.js

@@ -1,24 +1,20 @@
 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);
             return;
         }
-        const imgFile = new FileReader();
+        const base64Reader = new FileReader();
-        imgFile.readAsDataURL(file);
+        base64Reader.readAsDataURL(file);
 
-        imgFile.onload = function () {
+        base64Reader.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(res);
-                resolve(imageUrl);
             }).catch(err => {
                 reject(err.message)
             })

src/store/imageApi.js

@@ -15,39 +15,54 @@ const state = {
             'a4b581732e1c1507458doocsmdc5b223b27dae5e2e16a55'
         ]
     },
+    aliOSS: {
+        bucket: '<Your BucketName>',
+        // region以杭州为例（oss-cn-hangzhou），其他region按实际情况填写。
+        region: '<Your Region>',
+        // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
+        accessKeyId: '<Your AccessKeyId>',
+        accessKeySecret: '<Your AccessKeySecret>',
+    },
     qiniuCloud: {}
 };
 const getters = {
     config(state) {
-        let token, username, repo, method;
+        const date = new Date();
+        const dir = date.getFullYear() + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0');
         const activeKey = state.imgHost !== 'default' && localStorage.getItem(`${state.imgHost}Config`) ? state.imgHost : 'default';
 
         switch (activeKey) {
-            case 'github':
+            case 'aliOSS':
-                const githubConfg = JSON.parse(localStorage.getItem("githubConfig"));
+                return {
-                const repoUrl = githubConfg.repo.replace("https://github.com/", "").replace("http://github.com/", "").replace("github.com/", "").split("/");
+                    ...state.aliOSS,
-                token = githubConfg.accessToken;
+                    dir
-                username = repoUrl[0];
+                };
-                repo = repoUrl[1];
-                method = 'put';
-                break;
             case 'qiniuCloud':
-                break;
+                return {
-            default:
+                };
-                token = state.default.accessToken[Math.floor(Math.random() * state.default.accessToken.length)].replace('doocsmd', '');
+            case 'github':
-                username = state.default.username;
+                const githubConfig = JSON.parse(localStorage.getItem("githubConfig"));
-                repo = state.default.repo;
+                const repoUrl = githubConfig.repo.replace("https://github.com/", "").replace("http://github.com/", "").replace("github.com/", "").split("/");
-                method = state.default.method;
+                const username = repoUrl[0];
-                break;
+                const repo = repoUrl[1];
-        }
-        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,
+                    method: 'put',
-            token,
+                    headers: {
-            url
+                        'Authorization': 'token ' + githubConfig.accessToken
+                    },
+                    url: `https://api.github.com/repos/${username}/${repo}/contents/${dir}/`
+                };
+            default:
+                const token = state.default.accessToken[Math.floor(Math.random() * state.default.accessToken.length)].replace('doocsmd', '');
+
+                return {
+                    method: state.default.method,
+                    headers: {
+                        'Authorization': 'token ' + token
+                    },
+                    url: `https://api.github.com/repos/${state.default.username}/${state.default.repo}/contents/${dir}/`
+                };
         }
     }
 };