利用PicGo搭建我的圖牀

1、圖牀簡介

圖牀通常是指儲存圖片的服務器。寫 markdown 文檔的時候，每每由於本地圖片沒有連接致使很麻煩，我搭建圖牀就是爲了解決這個問題。

url簡單瞭解

示例：www.aspxfans.com:8080/news/index.… raw.githubusercontent.com/jianhunxia/…

一個完整的URL包括：

• 協議部分
• 域名部分
• 端口部分
• 虛擬目錄部分
• 文件名部分
• 參數部分
• 錨部分

1.協議部分：該URL的協議部分爲「http」，這表明網頁使用的是HTTP協議。在Internet中可使用多種協議，如HTTP，FTP等等本例中使用的是HTTP協議。在」HTTP」後面的「//」爲分隔符

2.域名部分：該URL的域名部分爲「www.aspxfans.com」。一個URL中，也可使用IP地址做爲域名使用

3.端口部分：跟在域名後面的是端口，域名和端口之間使用「:」做爲分隔符。端口不是一個URL必須的部分，若是省略端口部分，將採用默認端口

4.虛擬目錄部分：從域名後的第一個「/」開始到最後一個「/」爲止，是虛擬目錄部分。虛擬目錄也不是一個URL必須的部分。本例中的虛擬目錄是「/news/」

5.文件名部分：從域名後的最後一個「/」開始到「？」爲止，是文件名部分，若是沒有「?」,則是從域名後的最後一個「/」開始到「#」爲止，是文件部分，若是沒有「？」和「#」，那麼從域名後的最後一個「/」開始到結束，都是文件名部分。本例中的文件名是「index.asp」。文件名部分也不是一個URL必須的部分，若是省略該部分，則使用默認的文件名

6.參數部分：從「？」開始到「#」爲止之間的部分爲參數部分，又稱搜索部分、查詢部分。本例中的參數部分爲 「boardID=5&ID=24618&page=1」 。參數能夠容許有多個參數，參數與參數之間用「&」做爲分隔符。

7.錨部分：HTTP請求不包括錨部分，從「#」開始到最後，都是錨部分。本例中的錨部分是「r_70732423「。錨部分也不是一個URL必須的部分。
錨點做用：打開用戶頁面時滾動到該錨點位置。如：一個 html 頁面中有一段代碼，該 url 的 hash 爲r_70732423
複製代碼

2、搭建我的圖牀的幾種方式

• 阿里 OSS + PicGo
• Github + PicGo
• 七牛雲 + PicGo
• 利用gulp寫腳本上傳七牛

一、PicGo 簡介

PicGo 是一款優秀的開源的圖牀工具，就是自動把本地圖片上傳到服務器並返回連接的工具。它是用 Electron-vue 開發的軟件，支持微博，七牛雲，騰訊雲 COS，又拍雲，GitHub，阿里雲 OSS，SM.MS，imgur 等8種經常使用圖牀，功能強大，簡單易用。

PicGo下載地址

二、Github + PicGo 搭建圖牀

參考教程

這個很簡單，缺點是圖片存儲在 github 的服務器上，訪問可能會比較慢。

三、阿里雲 OSS + PicGo 搭建圖牀

參考教程

有幾點須要注意：

• 要添加自定義域名的話，要用沒有使用的域名，能夠自定義一個二級域名
• 添加完 PicGo 的阿里 OSS 配置後，要設爲默認圖牀

四、七牛雲 + PicGo搭建圖牀

參考教程

這個也是我如今使用的方式，有幾點須要注意：

• 七牛的測試域名有效期爲30天，最好購買一個域名
• 在域名解析裏添加上你的存儲空間對應的空間域名
• 在你的七牛存儲空間裏添加綁定域名
• 上傳同名圖片會覆蓋，連接上加參數能夠看到新圖片

五、七牛雲 + gulp 腳本上傳

一、安裝上傳所需依賴
$ yarn add gulp gulp-qiniu 

二、配置腳本命令
在package.json的scripts添加以下命令
"upload": "gulp qiniu"

三、在項目根目錄配置gulpfile.js
var gulp = require("gulp");
var path = require("path");
var qiniu = require("gulp-qiniu");

// file upload tasks
var imageSrc = path.resolve(__dirname, "src/assets/img/*.*");

gulp.task("qiniu", function (done) {
  gulp.src(imageSrc).pipe(qiniu({
    accessKey: "你七牛雲上的accessKey",
    secretKey: "你七牛雲上的secretKey",
    bucket: "你七牛雲上的存儲空間名字",
    private: false
  }, {
      dir: '自定義一個存儲路徑，例 img/',
      version: false
    })).on('finish', done);
});

// combine tasks
gulp.task('upload', gulp.series(['qiniu'], function (done) {
  done();
}))

module.exports = gulp;

四、經過腳本上傳 gulpfile.js 中配置的目錄下的全部圖片
$ yarn upload

複製代碼

有幾點須要注意：

• 一樣須要作好域名和解析
• 默認會跳過已經上傳過的圖片，同名但修改過的圖片會覆蓋
• 配置的域名+配置的存儲路徑+圖片名便可訪問

3、上傳文件到七牛雲

命令行工具 qshell、 使用 qshell 同步目錄、qshell github 文檔

一、qshell上傳文件

一、下載 qshell 命令行工具文件

二、重命名爲 qshell ,隨便在用戶根目錄下建立個目錄qshell,把文件拷貝到該目錄
$ cd ~
$ mkdir qshell && cp /Users/user/Downloads/qshell ~/qshell

三、將shell路徑加入到環境變量文件
$ open ~/.bash_profile
  添加一行：export PATH=$PATH:/Users/user/qshell
$ source ~/.bash_profile
$ qshell --version          // 查看是否配置成功

四、添加你的七牛雲帳戶
$ qshell account <Your AccessKey> <Your SecretKey>

五、添加上傳配置文件
$ cd ~/qshell
$ touch upload.conf
添加如下配置：
{
    "src_dir" : "/Users/user/Desktop/resource/static",  // 你要上傳的文件所在目錄
    "ignore_dir" : true,  // 忽略相對路徑，防止重複上傳
    "bucket" : "jianhao-static"   // 你的七牛雲存儲空間名
}

六、上傳文件
$ qshell qupload upload.conf
上傳成功能夠在你的七牛雲的存儲空間-內容管理下看到你上傳的文件
複製代碼

4、常見問題

一、PicGo 剪貼板上傳圖片報錯

報錯信息：

picgo v2.1.2
報錯：請檢查上傳配置
錯誤日誌：Error creating a JP2 color space from ICC profile. Falling back to sRGB
複製代碼

在 picgo 項目的 issue 找到暫時解決方案：

系統偏好設置-顯示器-顏色-普通 RGB
複製代碼

ps: 在下個版本做者會修復這個 bug

未完待續。。。