图片支持相对本地空间的路径存储

chrome-app/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "StackEdit中文版",
   "description": "支持Gitee仓库/粘贴图片自动上传的浏览器内 Markdown 编辑器",
-  "version": "5.15.14",
+  "version": "5.15.15",
   "manifest_version": 2,
   "container" : "GITEE",
   "api_console_project_id" : "241271498917",

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "stackedit",
-  "version": "5.15.14",
+  "version": "5.15.15",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stackedit",
-  "version": "5.15.14",
+  "version": "5.15.15",
   "description": "免费, 开源, 功能齐全的 Markdown 编辑器",
   "author": "Benoit Schweblin, 豆萁",
   "license": "Apache-2.0",

src/components/Editor.vue

@@ -34,7 +34,7 @@ export default {
     ]),
   },
   methods: {
-    async setImgAndDoClick(items) {
+    async processUpload(items) {
       let file = null;
       if (!items || items.length === 0) {
         return;
@@ -73,6 +73,11 @@ export default {
     if (currImgStorageStr) {
       store.commit('img/changeCheckedStorage', JSON.parse(currImgStorageStr));
     }
+    // 当前本地图片路径配置
+    const workspaceImgPath = localStorage.getItem('img/workspaceImgPath');
+    if (workspaceImgPath) {
+      store.commit('img/setWorkspaceImgPath', JSON.parse(workspaceImgPath));
+    }
     const editorElt = this.$el.querySelector('.editor__inner');
     const onDiscussionEvt = cb => (evt) => {
       let elt = evt.target;
@@ -100,11 +105,11 @@ export default {
 
     editorElt.addEventListener('drop', (event) => {
       const transItems = event.dataTransfer.items;
-      this.setImgAndDoClick(transItems);
+      this.processUpload(transItems);
     });
     editorElt.addEventListener('paste', (event) => {
       const pasteItems = (event.clipboardData || window.clipboardData).items;
-      this.setImgAndDoClick(pasteItems);
+      this.processUpload(pasteItems);
     });
 
     this.$watch(

src/components/Modal.vue

@@ -40,6 +40,7 @@ import AccountManagementModal from './modals/AccountManagementModal';
 import BadgeManagementModal from './modals/BadgeManagementModal';
 import SponsorModal from './modals/SponsorModal';
 import CommitMessageModal from './modals/CommitMessageModal';
+import WorkspaceImgPathModal from './modals/WorkspaceImgPathModal';
 
 // Providers
 import GooglePhotoModal from './modals/providers/GooglePhotoModal';
@@ -107,6 +108,7 @@ export default {
     BadgeManagementModal,
     SponsorModal,
     CommitMessageModal,
+    WorkspaceImgPathModal,
     // Providers
     GooglePhotoModal,
     GoogleDriveAccountModal,

src/components/modals/ImageModal.vue

@@ -15,6 +15,21 @@
     <div>
       <hr />
       <p>添加并选择图床后可在编辑区中粘贴/拖拽图片自动上传</p>
+
+      <menu-entry @click.native="checkedImgDest(path)" v-for="path in workspaceImgPath" :key="path">
+        <icon-check-circle v-if="checkedStorage.sub === path" slot="icon"></icon-check-circle>
+        <icon-check-circle-un v-if="checkedStorage.sub !== path" slot="icon"></icon-check-circle-un>
+        <menu-item>
+          <icon-provider slot="icon" :provider-id="currentWorkspace.providerId"></icon-provider>
+          <div>
+            本文档空间图片路径
+            <button class="menu-item__button button" @click.stop="removeByPath(path)" v-title="'删除'">
+              <icon-delete></icon-delete>
+            </button>
+          </div>
+          <span>路径：{{path}}</span>
+        </menu-item>
+      </menu-entry>
       <menu-entry @click.native="checkedImgDest(token.sub, token.providerId)" v-for="token in imageTokens" :key="token.sub">
         <icon-check-circle v-if="checkedStorage.sub === token.sub" slot="icon"></icon-check-circle>
         <icon-check-circle-un v-if="checkedStorage.sub !== token.sub" slot="icon"></icon-check-circle-un>
@@ -45,6 +60,10 @@
           <span> {{tokenStorage.uname}}, 仓库URL: {{tokenStorage.repoUrl}}, 路径: {{tokenStorage.path}}, 分支: {{tokenStorage.branch}}</span>
         </menu-item>
       </menu-entry>
+      <menu-entry @click.native="addWorkspaceImgPath">
+        <icon-provider slot="icon" :provider-id="currentWorkspace.providerId"></icon-provider>
+        <span>添加本文档空间图片路径</span>
+      </menu-entry>
       <menu-entry @click.native="addSmmsAccount">
         <icon-provider slot="icon" provider-id="smms"></icon-provider>
         <span>添加SM.MS图床账号</span>
@@ -66,6 +85,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import modalTemplate from './common/modalTemplate';
 import MenuEntry from '../menus/common/MenuEntry';
 import MenuItem from '../menus/common/MenuItem';
@@ -87,9 +107,16 @@ export default modalTemplate({
     url: '',
   }),
   computed: {
+    ...mapGetters('workspace', [
+      'currentWorkspace',
+    ]),
     checkedStorage() {
       return store.getters['img/getCheckedStorage'];
     },
+    workspaceImgPath() {
+      const workspaceImgPath = store.getters['img/getWorkspaceImgPath'];
+      return Object.keys(workspaceImgPath || {});
+    },
     imageTokens() {
       return [
         ...Object.values(store.getters['data/smmsTokensBySub']).map(token => ({
@@ -195,6 +222,13 @@ export default modalTemplate({
         // Cancel
       }
     },
+    async removeByPath(path) {
+      store.dispatch('img/removeWorkspaceImgPath', path);
+    },
+    async addWorkspaceImgPath() {
+      const { path } = await store.dispatch('modal/open', { type: 'workspaceImgPath' });
+      store.dispatch('img/addWorkspaceImgPath', path);
+    },
     async addSmmsAccount() {
       const { proxyUrl, apiSecretToken } = await store.dispatch('modal/open', { type: 'smmsAccount' });
       await smmsHelper.addAccount(proxyUrl, apiSecretToken);
@@ -227,7 +261,10 @@ export default modalTemplate({
     },
     async checkedImgDest(sub, provider, sid) {
       let type = 'token';
-      if (provider === 'gitea' || provider === 'github') {
+      // 当前文档空间存储
+      if (!provider) {
+        type = 'workspace';
+      } else if (provider === 'gitea' || provider === 'github') {
         type = 'tokenRepo';
       }
       store.dispatch('img/changeCheckedStorage', {

src/components/modals/WorkspaceImgPathModal.vue

@@ -0,0 +1,45 @@
+<template>
+  <modal-inner aria-label="文档空间图片路径">
+    <div class="modal__content">
+      <div class="modal__image">
+        <icon-provider :provider-id="currentWorkspace.providerId"></icon-provider>
+      </div>
+      <p>在当前文档空间增加图片上传路径。</p>
+      <form-entry label="图片上传路径" error="path">
+        <input slot="field" class="textfield" type="text" placeholder="如：/imgs/{YYYY}-{MM}-{DD}" v-model.trim="path" @keydown.enter="resolve()">
+        <div class="form-entry__info">
+          如果不提供，默认为 /imgs/{YYYY}-{MM}-{DD} ，其中{YYYY}为年变量、{MM}为月变量、{DD}为日变量。<br/>
+          支持相对路径，如 ./imgs 或 imgs 都是相对当前编辑中文档的路径，不支持相对上级路径。
+        </div>
+      </form-entry>
+    </div>
+    <div class="modal__button-bar">
+      <button class="button" @click="config.reject()">取消</button>
+      <button class="button button--resolve" @click="resolve()">确认</button>
+    </div>
+  </modal-inner>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import modalTemplate from './common/modalTemplate';
+
+export default modalTemplate({
+  computedLocalSettings: {
+    path: '',
+  },
+  computed: {
+    ...mapGetters('workspace', [
+      'currentWorkspace',
+    ]),
+  },
+  methods: {
+    resolve() {
+      const path = this.path && this.path.replace(/^\//, '');
+      this.config.resolve({
+        path: path || '/imgs/{YYYY}-{MM}-{DD}',
+      });
+    },
+  },
+});
+</script>

src/services/editorSvc.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import DiffMatchPatch from 'diff-match-patch';
 import Prism from 'prismjs';
 import markdownItPandocRenderer from 'markdown-it-pandoc-renderer';
+import md5 from 'js-md5';
 import cledit from './editor/cledit';
 import pagedown from '../libs/pagedown';
 import htmlSanitizer from '../libs/htmlSanitizer';
@@ -13,6 +14,9 @@ import editorSvcDiscussions from './editor/editorSvcDiscussions';
 import editorSvcUtils from './editor/editorSvcUtils';
 import utils from './utils';
 import store from '../store';
+import syncSvc from './syncSvc';
+import constants from '../data/constants';
+import localDbSvc from './localDbSvc';
 
 const allowDebounce = (action, wait) => {
   let timeoutId;
@@ -40,6 +44,39 @@ class SectionDesc {
   }
 }
 
+const pathUrlMap = Object.create(null);
+
+const getCurrAbsolutePath = () => {
+  const fileId = store.getters['file/current'].id;
+  const fileSyncData = store.getters['data/syncDataByItemId'][fileId] || { id: '' };
+  const fileAbsolutePath = `${store.getters['workspace/currentWorkspace'].path || ''}${fileSyncData.id}`;
+  return fileAbsolutePath.substring(0, fileAbsolutePath.lastIndexOf('/'));
+};
+
+const getImgUrl = async (uri) => {
+  if (uri.indexOf('http://') !== 0 && uri.indexOf('https://') !== 0) {
+    const absoluteImgPath = utils.getAbsoluteFilePath(getCurrAbsolutePath(), uri);
+    if (pathUrlMap[absoluteImgPath]) {
+      return pathUrlMap[absoluteImgPath];
+    }
+    const md5Id = md5(absoluteImgPath);
+    let imgItem = await localDbSvc.getImgItem(md5Id);
+    if (!imgItem) {
+      await syncSvc.syncImg(absoluteImgPath);
+      imgItem = await localDbSvc.getImgItem(md5Id);
+    }
+    if (imgItem) {
+      // imgItem 如果不存在 则加载 TODO
+      const imgFile = utils.base64ToBlob(imgItem.content, uri);
+      const url = URL.createObjectURL(imgFile);
+      pathUrlMap[absoluteImgPath] = url;
+      return url;
+    }
+    return '';
+  }
+  return uri;
+};
+
 // Use a vue instance as an event bus
 const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils, {
   // Elements
@@ -212,11 +249,18 @@ const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils,
     this.makeTextToPreviewDiffs();
 
     // Wait for images to load
-    const loadedPromises = loadingImages.map(imgElt => new Promise((resolve) => {
+    const loadedPromises = loadingImages.map(imgElt => new Promise((resolve, reject) => {
       if (!imgElt.src) {
         resolve();
         return;
       }
+      if (imgElt.src.indexOf(constants.origin) >= 0) {
+        getImgUrl(imgElt.src.replace(constants.origin, '')).then((newUrl) => {
+          imgElt.src = newUrl;
+          resolve();
+        }, () => reject(new Error('加载本地空间图片出错')));
+        return;
+      }
       const img = new window.Image();
       img.onload = resolve;
       img.onerror = resolve;
@@ -471,6 +515,7 @@ const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils,
     let imgEltsToCache = [];
     if (store.getters['data/computedSettings'].editor.inlineImages) {
       this.clEditor.highlighter.on('sectionHighlighted', (section) => {
+        const loadImgs = [];
         section.elt.getElementsByClassName('token img').cl_each((imgTokenElt) => {
           const srcElt = imgTokenElt.querySelector('.token.cl-src');
           if (srcElt) {
@@ -496,6 +541,9 @@ const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils,
                 }
               }
               imgEltsToCache.push(imgElt);
+              if (imgElt.src.indexOf(origin) >= 0) {
+                loadImgs.push(imgElt);
+              }
             }
             const imgTokenWrapper = document.createElement('span');
             imgTokenWrapper.className = 'token img-wrapper';
@@ -504,9 +552,19 @@ const editorSvc = Object.assign(new Vue(), editorSvcDiscussions, editorSvcUtils,
             imgTokenWrapper.appendChild(imgTokenElt);
           }
         });
+        if (loadImgs.length) {
+          // Wait for images to load
+          const loadWorkspaceImg = loadImgs.map(imgElt => new Promise((resolve, reject) => {
+            const uri = imgElt.src.replace(origin, '');
+            getImgUrl(uri).then((newUrl) => {
+              imgElt.src = newUrl;
+              resolve();
+            }, () => reject(new Error(`加载本地空间图片出错,uri:${uri}`)));
+          }));
+          Promise.all(loadWorkspaceImg).then();
+        }
       });
     }
-
     this.clEditor.highlighter.on('highlighted', () => {
       imgEltsToCache.forEach((imgElt) => {
         const cachedImgElt = getFromImgCache(imgElt);

src/services/imageSvc.js

@@ -1,17 +1,52 @@
+import md5 from 'js-md5';
 import store from '../store';
 import utils from './utils';
+import localDbSvc from './localDbSvc';
 import smmsHelper from '../services/providers/helpers/smmsHelper';
 import giteaHelper from '../services/providers/helpers/giteaHelper';
 import githubHelper from '../services/providers/helpers/githubHelper';
 import customHelper from '../services/providers/helpers/customHelper';
 
+function getCurrAbsolutePath() {
+  const fileId = store.getters['file/current'].id;
+  const fileSyncData = store.getters['data/syncDataByItemId'][fileId] || { id: '' };
+  const fileAbsolutePath = `${store.getters['workspace/currentWorkspace'].path || ''}${fileSyncData.id}`;
+  return fileAbsolutePath.substring(0, fileAbsolutePath.lastIndexOf('/'));
+}
+
+function getImagePath(confPath, imgType) {
+  const time = new Date();
+  const date = time.getDate();
+  const month = time.getMonth() + 1;
+  const year = time.getFullYear();
+  const path = confPath.replace('{YYYY}', year)
+    .replace('{MM}', `0${month}`.slice(-2)).replace('{DD}', `0${date}`.slice(-2));
+  return `${path}${path.endsWith('/') ? '' : '/'}${utils.uid()}.${imgType.split('/')[1]}`;
+}
+
 export default {
   // 上传图片 返回图片链接
   // { url: 'http://xxxx', error: 'xxxxxx'}
   async updateImg(imgFile) {
     // 操作图片上传
     const currStorage = store.getters['img/getCheckedStorage'];
-    if (!currStorage || !currStorage.provider) {
+    if (!currStorage) {
+      return { error: '暂无已选择的图床！' };
+    }
+    // 判断是否文档空间路径
+    if (currStorage.type === 'workspace') {
+      const path = getImagePath(currStorage.sub, imgFile.type);
+      // 保存到indexeddb
+      const base64 = await utils.encodeFiletoBase64(imgFile);
+      const absolutePath = utils.getAbsoluteFilePath(getCurrAbsolutePath(), path);
+      await localDbSvc.saveImg({
+        id: md5(absolutePath),
+        path: absolutePath,
+        content: base64,
+      });
+      return { url: path };
+    }
+    if (!currStorage.provider) {
       return { error: '暂无已选择的图床！' };
     }
     const token = store.getters[`data/${currStorage.provider}TokensBySub`][currStorage.sub];
@@ -32,13 +67,7 @@ export default {
         return { error: '暂无已选择的图床！' };
       }
       const checkStorage = checkStorages[0];
-      const time = new Date();
+      const path = getImagePath(checkStorage.path, imgFile.type);
-      const date = time.getDate();
-      const month = time.getMonth() + 1;
-      const year = time.getFullYear();
-      let path = checkStorage.path.replace('{YYYY}', year)
-        .replace('{MM}', `0${month}`.slice(-2)).replace('{DD}', `0${date}`.slice(-2));
-      path = `${path}${path.endsWith('/') ? '' : '/'}${utils.uid()}.${imgFile.type.split('/')[1]}`;
       if (currStorage.provider === 'gitea') {
         const result = await giteaHelper.uploadFile({
           token,
@@ -46,7 +75,7 @@ export default {
           branch: checkStorage.branch,
           path,
           content: imgFile,
-          isFile: true,
+          isImg: true,
         });
         url = result.content.download_url;
       } else if (currStorage.provider === 'github') {
@@ -57,7 +86,7 @@ export default {
           branch: checkStorage.branch,
           path,
           content: imgFile,
-          isFile: true,
+          isImg: true,
         });
         url = result.content.download_url;
       }

src/services/localDbSvc.js

@@ -5,8 +5,10 @@ import workspaceSvc from './workspaceSvc';
 import constants from '../data/constants';
 
 const deleteMarkerMaxAge = 1000;
-const dbVersion = 1;
+const dbVersion = 3;
 const dbStoreName = 'objects';
+const imgDbStoreName = 'imgs';
+const imgWaitUploadIdsKey = 'waitUploadImgIds';
 const { silent } = utils.queryParams;
 const resetApp = localStorage.getItem('resetStackEdit');
 if (resetApp) {
@@ -24,7 +26,7 @@ class Connection {
     const request = indexedDB.open(this.dbName, dbVersion);
 
     request.onerror = () => {
-      throw new Error("Can't connect to IndexedDB.");
+      throw new Error('无法连接到IndexedDB.');
     };
 
     request.onsuccess = (event) => {
@@ -37,24 +39,21 @@ class Connection {
 
     request.onupgradeneeded = (event) => {
       const eventDb = event.target.result;
-      const oldVersion = event.oldVersion || 0;
+      // const oldVersion = event.oldVersion || 0;
-
+      if (!eventDb.objectStoreNames.contains(dbStoreName)) {
-      // We don't use 'break' in this switch statement,
+        // Create store
-      // the fall-through behavior is what we want.
+        const dbStore = eventDb.createObjectStore(dbStoreName, {
-      /* eslint-disable no-fallthrough */
+          keyPath: 'id',
-      switch (oldVersion) {
+        });
-        case 0: {
+        dbStore.createIndex('tx', 'tx', {
-          // Create store
+          unique: false,
-          const dbStore = eventDb.createObjectStore(dbStoreName, {
+        });
-            keyPath: 'id',
+      }
-          });
+      if (!eventDb.objectStoreNames.contains(imgDbStoreName)) {
-          dbStore.createIndex('tx', 'tx', {
+        eventDb.createObjectStore(imgDbStoreName, {
-            unique: false,
+          keyPath: 'id',
-          });
+        });
-        }
-        default:
       }
-      /* eslint-enable no-fallthrough */
     };
   }
 
@@ -193,6 +192,55 @@ const localDbSvc = {
       cb(storeItemMap);
     };
   },
+  async saveImg(imgItem) {
+    await this.writeImgItem(imgItem);
+    const waitUploadIdsItem = (await this.getImgItem(imgWaitUploadIdsKey))
+       || { id: imgWaitUploadIdsKey, ids: [] };
+    const waitUplodIds = waitUploadIdsItem.ids || [];
+    // 如果已上传
+    if (imgItem.uploaded) {
+      waitUplodIds.splice(waitUplodIds.indexOf(imgItem.id), 1);
+    } else {
+      waitUplodIds.push(imgItem.id);
+    }
+    waitUploadIdsItem.ids = waitUplodIds;
+    await this.writeImgItem(waitUploadIdsItem);
+  },
+  // 获取待上传的图片id
+  async getWaitUploadImgIds() {
+    const waitUploadIdsItem = (await this.getImgItem(imgWaitUploadIdsKey))
+       || { id: imgWaitUploadIdsKey, ids: [] };
+    return waitUploadIdsItem.ids || [];
+  },
+  /**
+   * 写入图片
+   */
+  async writeImgItem(imgItem) {
+    return new Promise((resolve, reject) => {
+      // Create the DB transaction
+      this.connection.createTx((tx) => {
+        const dbStore = tx.objectStore(imgDbStoreName);
+        dbStore.put(imgItem);
+        resolve();
+      }, () => reject(new Error('保存图片异常')));
+    });
+  },
+  /**
+   * 读取图片
+   */
+  async getImgItem(id) {
+    return new Promise((resolve, reject) => {
+      // Get the item from DB
+      this.connection.createTx((tx) => {
+        const dbStore = tx.objectStore(imgDbStoreName);
+        const request = dbStore.get(id);
+        request.onsuccess = () => {
+          const dbItem = request.result;
+          resolve(dbItem);
+        };
+      }, () => reject(new Error('indexeddb获取图片异常')));
+    });
+  },
 
   /**
    * Write all changes from the store since previous transaction.

src/services/providers/giteaWorkspaceProvider.js

@@ -173,6 +173,18 @@ export default new Provider({
       },
     };
   },
+  async downloadFile({ token, path }) {
+    const { sha, data } = await giteaHelper.downloadFile({
+      ...store.getters['workspace/currentWorkspace'],
+      token,
+      path,
+      isImg: true,
+    });
+    return {
+      content: data,
+      sha,
+    };
+  },
   async downloadWorkspaceData({ token, syncData }) {
     if (!syncData) {
       return {};
@@ -200,25 +212,32 @@ export default new Provider({
     file,
     commitMessage,
   }) {
-    const path = store.getters.gitPathsByItemId[file.id];
+    const isImg = file.type === 'img';
-    const absolutePath = `${store.getters['workspace/currentWorkspace'].path || ''}${path}`;
+    const path = store.getters.gitPathsByItemId[file.id] || '';
-    const sha = gitWorkspaceSvc.shaByPath[path];
+    const absolutePath = !isImg ? `${store.getters['workspace/currentWorkspace'].path || ''}${store.getters.gitPathsByItemId[file.id]}` : file.path;
-    await giteaHelper.uploadFile({
+    const sha = gitWorkspaceSvc.shaByPath[!isImg ? path : file.path];
+    const res = await giteaHelper.uploadFile({
       ...store.getters['workspace/currentWorkspace'],
       token,
       path: absolutePath,
-      content: Provider.serializeContent(content),
+      content: !isImg ? Provider.serializeContent(content) : file.content,
       sha,
+      isImg,
       commitMessage,
     });
 
+    if (isImg) {
+      return {
+        sha: res.content.sha,
+      };
+    }
     // Return new sync data
     return {
       contentSyncData: {
         id: store.getters.gitPathsByItemId[content.id],
         type: content.type,
         hash: content.hash,
-        sha,
+        sha: res.content.sha,
       },
       fileSyncData: {
         id: path,

src/services/providers/giteeAppDataProvider.js

@@ -110,6 +110,20 @@ export default new Provider({
       },
     };
   },
+  async downloadFile({ token, path }) {
+    const { sha, data } = await giteeHelper.downloadFile({
+      owner: token.name,
+      repo: appDataRepo,
+      branch: appDataBranch,
+      token,
+      path,
+      isImg: true,
+    });
+    return {
+      content: data,
+      sha,
+    };
+  },
   async downloadWorkspaceData({ token, syncData }) {
     if (!syncData) {
       return {};
@@ -145,18 +159,25 @@ export default new Provider({
     file,
     commitMessage,
   }) {
-    const path = store.getters.gitPathsByItemId[file.id];
+    const isImg = file.type === 'img';
+    const path = !isImg ? store.getters.gitPathsByItemId[file.id] : file.path;
     const res = await giteeHelper.uploadFile({
       owner: token.name,
       repo: appDataRepo,
       branch: appDataBranch,
       token,
       path,
-      content: Provider.serializeContent(content),
+      content: !isImg ? Provider.serializeContent(content) : file.content,
-      sha: gitWorkspaceSvc.shaByPath[path],
+      sha: gitWorkspaceSvc.shaByPath[!isImg ? path : file.path],
+      isImg,
       commitMessage,
     });
 
+    if (isImg) {
+      return {
+        sha: res.content.sha,
+      };
+    }
     // Return new sync data
     return {
       contentSyncData: {

src/services/providers/giteeWorkspaceProvider.js

@@ -158,6 +158,18 @@ export default new Provider({
       },
     };
   },
+  async downloadFile({ token, path }) {
+    const { sha, data } = await giteeHelper.downloadFile({
+      ...store.getters['workspace/currentWorkspace'],
+      token,
+      path,
+      isImg: true,
+    });
+    return {
+      content: data,
+      sha,
+    };
+  },
   async downloadWorkspaceData({ token, syncData }) {
     if (!syncData) {
       return {};
@@ -185,17 +197,24 @@ export default new Provider({
     file,
     commitMessage,
   }) {
-    const path = store.getters.gitPathsByItemId[file.id];
+    const isImg = file.type === 'img';
-    const absolutePath = `${store.getters['workspace/currentWorkspace'].path || ''}${path}`;
+    const path = store.getters.gitPathsByItemId[file.id] || '';
+    const absolutePath = !isImg ? `${store.getters['workspace/currentWorkspace'].path || ''}${path}` : file.path;
     const res = await giteeHelper.uploadFile({
       ...store.getters['workspace/currentWorkspace'],
       token,
       path: absolutePath,
-      content: Provider.serializeContent(content),
+      content: !isImg ? Provider.serializeContent(content) : file.content,
-      sha: gitWorkspaceSvc.shaByPath[path],
+      sha: gitWorkspaceSvc.shaByPath[!isImg ? path : file.path],
+      isImg,
       commitMessage,
     });
 
+    if (isImg) {
+      return {
+        sha: res.content.sha,
+      };
+    }
     // Return new sync data
     return {
       contentSyncData: {

src/services/providers/githubWorkspaceProvider.js

@@ -158,6 +158,18 @@ export default new Provider({
       },
     };
   },
+  async downloadFile({ token, path }) {
+    const { sha, data } = await githubHelper.downloadFile({
+      ...store.getters['workspace/currentWorkspace'],
+      token,
+      path,
+      isImg: true,
+    });
+    return {
+      content: data,
+      sha,
+    };
+  },
   async downloadWorkspaceData({ token, syncData }) {
     if (!syncData) {
       return {};
@@ -185,17 +197,23 @@ export default new Provider({
     file,
     commitMessage,
   }) {
-    const path = store.getters.gitPathsByItemId[file.id];
+    const isImg = file.type === 'img';
-    const absolutePath = `${store.getters['workspace/currentWorkspace'].path || ''}${path}`;
+    const path = store.getters.gitPathsByItemId[file.id] || '';
+    const absolutePath = !isImg ? `${store.getters['workspace/currentWorkspace'].path || ''}${path}` : file.path;
     const res = await githubHelper.uploadFile({
       ...store.getters['workspace/currentWorkspace'],
       token,
       path: absolutePath,
-      content: Provider.serializeContent(content),
+      content: !isImg ? Provider.serializeContent(content) : file.content,
-      sha: gitWorkspaceSvc.shaByPath[path],
+      sha: gitWorkspaceSvc.shaByPath[!isImg ? path : file.path],
+      isImg,
       commitMessage,
     });
-
+    if (isImg) {
+      return {
+        sha: res.content.sha,
+      };
+    }
     // Return new sync data
     return {
       contentSyncData: {

src/services/providers/helpers/giteaHelper.js

@@ -314,16 +314,20 @@ export default {
     path,
     content,
     sha,
-    isFile,
+    isImg,
     commitMessage,
   }) {
+    let uploadContent = content;
+    if (isImg && typeof content !== 'string') {
+      uploadContent = await utils.encodeFiletoBase64(content);
+    }
     const refreshedToken = await this.refreshToken(token);
     return request(refreshedToken, {
       method: sha ? 'PUT' : 'POST',
       url: `repos/${projectId}/contents/${encodeURIComponent(path)}`,
       body: {
         message: commitMessage || getCommitMessage(sha ? 'updateFileMessage' : 'createFileMessage', path),
-        content: isFile ? await utils.encodeFiletoBase64(content) : utils.encodeBase64(content),
+        content: isImg ? uploadContent : utils.encodeBase64(content),
         sha,
         branch,
       },
@@ -360,6 +364,7 @@ export default {
     projectId,
     branch,
     path,
+    isImg,
   }) {
     const refreshedToken = await this.refreshToken(token);
     const { sha, content } = await request(refreshedToken, {
@@ -368,7 +373,7 @@ export default {
     });
     return {
       sha,
-      data: utils.decodeBase64(content),
+      data: !isImg ? utils.decodeBase64(content) : content,
     };
   },
 };

src/services/providers/helpers/giteeHelper.js

@@ -276,15 +276,20 @@ export default {
     path,
     content,
     sha,
+    isImg,
     commitMessage,
   }) {
+    let uploadContent = content;
+    if (isImg && typeof content !== 'string') {
+      uploadContent = await utils.encodeFiletoBase64(content);
+    }
     const refreshedToken = await this.refreshToken(token);
     return repoRequest(refreshedToken, owner, repo, {
       method: sha ? 'PUT' : 'POST',
       url: `contents/${encodeURIComponent(path)}`,
       body: {
         message: commitMessage || getCommitMessage(sha ? 'updateFileMessage' : 'createFileMessage', path),
-        content: utils.encodeBase64(content || ' '),
+        content: isImg ? uploadContent : utils.encodeBase64(content || ' '),
         sha,
         branch,
       },
@@ -323,6 +328,7 @@ export default {
     repo,
     branch,
     path,
+    isImg,
   }) {
     const refreshedToken = await this.refreshToken(token);
     const { sha, content } = await repoRequest(refreshedToken, owner, repo, {
@@ -330,7 +336,7 @@ export default {
       params: { ref: branch },
     });
     if (sha) {
-      const data = utils.decodeBase64(content);
+      const data = !isImg ? utils.decodeBase64(content) : content;
       return {
         sha,
         data: data === ' ' ? '' : data,

src/services/providers/helpers/githubHelper.js

@@ -176,15 +176,19 @@ export default {
     path,
     content,
     sha,
-    isFile,
+    isImg,
     commitMessage,
   }) {
+    let uploadContent = content;
+    if (isImg && typeof content !== 'string') {
+      uploadContent = await utils.encodeFiletoBase64(content);
+    }
     return repoRequest(token, owner, repo, {
       method: 'PUT',
       url: `contents/${encodeURIComponent(path)}`,
       body: {
         message: commitMessage || getCommitMessage(sha ? 'updateFileMessage' : 'createFileMessage', path),
-        content: isFile ? await utils.encodeFiletoBase64(content) : utils.encodeBase64(content),
+        content: isImg ? uploadContent : utils.encodeBase64(content),
         sha,
         branch,
       },
@@ -222,6 +226,7 @@ export default {
     repo,
     branch,
     path,
+    isImg,
   }) {
     const { sha, content } = await repoRequest(token, owner, repo, {
       url: `contents/${encodeURIComponent(path)}`,
@@ -229,7 +234,7 @@ export default {
     });
     return {
       sha,
-      data: utils.decodeBase64(content),
+      data: !isImg ? utils.decodeBase64(content) : content,
     };
   },
   /**

src/services/syncSvc.js

@@ -1,3 +1,4 @@
+import md5 from 'js-md5';
 import localDbSvc from './localDbSvc';
 import store from '../store';
 import utils from './utils';
@@ -841,6 +842,61 @@ const syncWorkspace = async (skipContents = false) => {
   }
 };
 
+const syncImg = async (absolutePath) => {
+  const token = workspaceProvider.getToken();
+  const path = absolutePath.substring(1, absolutePath.length);
+  const { sha, content } = await workspaceProvider.downloadFile({
+    token,
+    path,
+  });
+  if (!sha || !content) {
+    return;
+  }
+  await localDbSvc.saveImg({
+    id: md5(absolutePath),
+    path: absolutePath,
+    content,
+    uploaded: 1,
+    sha,
+  });
+};
+
+const uploadImg = async (imgIds, index = 0) => {
+  if (imgIds.length - 1 < index) {
+    return;
+  }
+  const item = await localDbSvc.getImgItem(imgIds[index]);
+  // 不存在item 或已上传 则跳过
+  if (!item || item.uploaded) {
+    setTimeout(await uploadImg(imgIds, index + 1), 10);
+    return;
+  }
+  const token = workspaceProvider.getToken();
+  const { sha } = await workspaceProvider.uploadWorkspaceContent({
+    token,
+    file: {
+      ...utils.deepCopy(item),
+      type: 'img',
+      path: item.path.substring(1, item.path.length),
+    },
+    isImg: true,
+  });
+  await localDbSvc.saveImg({
+    ...item,
+    uploaded: 1,
+    sha,
+  });
+  setTimeout(await uploadImg(imgIds, index + 1), 500);
+};
+
+const uploadImgs = async () => {
+  // 新增的图片
+  const imgIds = await localDbSvc.getWaitUploadImgIds();
+  if (imgIds.length > 0) {
+    await uploadImg(imgIds);
+  }
+};
+
 /**
  * Enqueue a sync task, if possible.
  */
@@ -888,6 +944,8 @@ const requestSync = (addTriggerSyncBadge = false) => {
             // all the syncedContent objects.
             await syncFile(store.getters['file/current'].id);
           }
+          // 同步图片
+          await uploadImgs();
 
           // Clean files
           Object.entries(fileHashesToClean).forEach(([fileId, fileHash]) => {
@@ -983,6 +1041,7 @@ export default {
       }, 5000);
     }
   },
+  syncImg,
   isSyncPossible,
   requestSync,
   createSyncLocation,

src/services/utils.js

@@ -190,6 +190,19 @@ export default {
       reader.onerror = error => reject(error);
     });
   },
+  base64ToBlob(dataurl, fileName) {
+    const potIdx = fileName.lastIndexOf('.');
+    const suffix = potIdx > -1 ? fileName.substring(potIdx + 1) : 'png';
+    const mime = `image/${suffix}`;
+    const bstr = atob(dataurl);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n >= 0) {
+      n -= 1;
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new Blob([u8arr], { type: mime });
+  },
   decodeBase64(str) {
     // In case of URL safe base64
     const sanitizedStr = str.replace(/_/g, '/').replace(/-/g, '+');
@@ -370,4 +383,18 @@ export default {
       elt.parentNode.removeChild(elt);
     });
   },
+  // 根据当前绝对路径 与 文件路径计算出文件绝对路径
+  getAbsoluteFilePath(currAbsolutePath, filePath) {
+    // "/"开头说明已经是绝对路径
+    if (filePath.indexOf('/') === 0) {
+      return filePath;
+    }
+    let path = filePath;
+    if (filePath.indexOf('./') === 0) {
+      path = `${currAbsolutePath}/${path.replace('./', '')}`;
+    } else {
+      path = `${currAbsolutePath}/${path}`;
+    }
+    return path.indexOf('/') === 0 ? path : `/${path}`;
+  },
 };

src/store/img.js

@@ -1,23 +1,26 @@
-const localKey = 'img/checkedStorage';
+import utils from '../services/utils';
+
+const checkStorageLocalKey = 'img/checkedStorage';
+const workspacePathLocalKey = 'img/workspaceImgPath';
 
 export default {
   namespaced: true,
   state: {
-    // 来自粘贴板 或者 拖拽的图片的文件对象
+    // 当前图片上传中的临时ID
-    currImg: null,
-    // 当前图片ID
     currImgId: null,
     // 选择的存储图床信息
     checkedStorage: {
-      type: null, // 目前存储类型分两种 token 与 tokenRepo
+      type: 'workspace', // 目前存储类型分三种 token 与 tokenRepo 、workspace
       provider: null, // 对应是何种账号
-      sub: null, // 对应 token 中的sub
+      sub: '/imgs/{YYYY}-{MM}-{DD}', // 对应 token 中的sub
+      sid: null,
+    },
+    // 当前仓库图片存储位置 key 为path value 为true
+    workspaceImagePath: {
+      '/imgs/{YYYY}-{MM}-{DD}': true,
     },
   },
   mutations: {
-    setNewImg: (state, value) => {
-      state.currImg = value;
-    },
     setCurrImgId: (state, value) => {
       state.currImgId = value;
     },
@@ -41,17 +44,28 @@ export default {
         };
       }
     },
+    setWorkspaceImgPath: (state, value) => {
+      state.workspaceImagePath = value;
+      localStorage.setItem(workspacePathLocalKey, JSON.stringify(state.workspaceImagePath));
+    },
+    addWorkspaceImgPath: (state, value) => {
+      state.workspaceImagePath[value] = true;
+      state.workspaceImagePath = utils.deepCopy(state.workspaceImagePath);
+      localStorage.setItem(workspacePathLocalKey, JSON.stringify(state.workspaceImagePath));
+    },
+    removeWorkspaceImgPath: (state, value) => {
+      delete state.workspaceImagePath[value];
+      state.workspaceImagePath = utils.deepCopy(state.workspaceImagePath);
+      localStorage.setItem(workspacePathLocalKey, JSON.stringify(state.workspaceImagePath));
+    },
   },
   getters: {
-    getImg: state => state.currImg,
     currImgId: state => state.currImgId,
     getCheckedStorage: state => state.checkedStorage,
     getCheckedStorageSub: state => state.checkedStorage.sub,
+    getWorkspaceImgPath: state => state.workspaceImagePath,
   },
   actions: {
-    setImg({ commit }, img) {
-      commit('setNewImg', img);
-    },
     setCurrImgId({ commit }, imgId) {
       commit('setCurrImgId', imgId);
     },
@@ -60,7 +74,16 @@ export default {
     },
     changeCheckedStorage({ commit }, checkedStorage) {
       commit('changeCheckedStorage', checkedStorage);
-      localStorage.setItem(localKey, JSON.stringify(checkedStorage));
+      localStorage.setItem(checkStorageLocalKey, JSON.stringify(checkedStorage));
+    },
+    setWorkspaceImgPath({ commit }, workspaceImgPath) {
+      commit('setWorkspaceImgPath', workspaceImgPath);
+    },
+    addWorkspaceImgPath({ commit }, workspaceImgPathValue) {
+      commit('addWorkspaceImgPath', workspaceImgPathValue);
+    },
+    removeWorkspaceImgPath({ commit }, workspaceImgPathValue) {
+      commit('removeWorkspaceImgPath', workspaceImgPathValue);
     },
   },
 };