圖牀工具的實現-基礎篇
在上一章,我們介紹了圖牀工具(上傳組件)的使用,這一章,我們來解析圖牀工具的實現,手把手教你寫一個圖牀工具(Node 小工具)。
在教學開始前,我們需要準備:
- Node運行環境:圖牀上傳工具使用 Node 開發
我們希望你掌握以下知識:
(以下知識也可以跳過,直接開始學習本教程;掌握是爲了更好的理解)
我們的基本目標
- 對基本的文件格式進行限制;
- 可指定上傳目錄,完成本地目錄與遠程目錄映射;
- 圖片上傳功能;
我們的進階目標:
- 將上傳組件解耦,做成可配置項;
- 將上傳組件製作成圖牀工具,將配置與組件解耦,由外部實現調用;
- 提供 windows 與 mac 雙平臺的腳本,使非技術人員可以通過該腳本配置公司靜態資源;(如 banner 圖、廣告圖)
(以下代碼實現保存在 插件合集 中的 demo 目錄下)
基本目標
我們的第一個目標是可指定上傳目錄,完成本地目錄與遠程目錄映射,我們需要完成這個目標的話,我們需要有一個本地目錄,所以我們在根目錄下新建一個本地目錄,取名爲 images
,我們再預設置一些目錄及圖片文件,具體如下
現在我們的目標是要將本地目錄的圖片文件上傳至遠程目錄,我們假設本地目錄地址爲 local_url
,遠程目錄爲 remote_url
, 那麼本地目錄文件就是 local_url/images/blogs/plugins/upload/1.png
,我們需要將該目錄上傳到遠程目錄的 remote_url/images/blogs/plugins/upload/1.png
。
所以我們第一步就是需要解析本地目錄,並且將本地目錄的圖片文件都解析出來。
我們新建 src/upload/index.js
,先定義支持的圖片格式
const DEFAULT_ALLOW_FILE = ["png", "jpg"];
定義好了支持的圖片格式後,我們開始對目錄進行檢索
// fs 模塊,用於讀取目錄與文件
const fs = require('fs');
// path 模塊,用於解析和拼裝路徑
const path = require('path');
const DEFAULT_ALLOW_FILE = ["png", "jpg"];
/**
* 讀取目錄下的圖片文件,收集在 images 中
* @param {*} entry 入口
* @param {*} images 圖片集合
*/
function readDir(entry, images = []) {
const dirInfo = fs.readdirSync(entry);
for (let i = 0; i < dirInfo.length; i++) {
const item = dirInfo[i];
// 拼裝出文件/文件夾的路徑
const location = path.join(entry, item);
const isDir = fs.statSync(location).isDirectory();
// 如果爲文件夾則繼續遞歸向下查詢
if (isDir) {
readDir(location, images);
// 判斷是否爲所允許的圖片格式
} else if (DEFAULT_ALLOW_FILE.some(allowScheme => location.endsWith(allowScheme))) {
images.push(location);
}
}
return images;
}
// 定義檢索的入口文件夾( images 文件夾)
const staticDirPath = path.join(__dirname, '../..', 'images');
const images = readDir(staticDirPath);
console.log(images);
我們使用 node src/upload/index.js
命令執行該腳本,最後檢索出來的 images
是個數組,包含了本地 images
下所有的圖片文件路徑,也就是我們需要的 local_url/image_path
集合。
現在我們開始最後一步,開始上傳,阿里雲 oss 提供了一個庫 —— ali-oss
,我們使用 npm 進行安裝,然後我們在頭部導入
const OSS = require("ali-oss");
然後我們根據阿里雲提供的 API,編寫上傳的代碼
//...
// Convert Windows backslash paths to slash paths
const slash = require('slash');
const OSS = require("ali-oss");
//...
// 這些配置參數在上一章已經進行說明,不再複述
const client = new OSS({
"region": "<your config>",
"accessKeyId": "<your config>",
"accessKeySecret": "<your config>",
"bucket": "<your config>",
});
async function upload() {
for (let i = 0; i < images.length; i++) {
// slash 是爲了兼容 windows 平臺的路徑劃分符爲 \ 的特性
const local_url = slash(images[i]);
// 阿里雲 OSS 目標文件名
// local_url.split() 是爲了去除本地目錄的前綴
const remote_url = `images${local_url.split(staticDirPath)[1]}`;
// 按順序依次上傳文件
const result = await client.put(remote_url, local_url)
console.log(`${result.url} 上傳成功`);
}
console.log("所有文件上傳成功");
}
upload();
我們使用 node src/upload/index.js
命令執行該腳本,下面可以看到執行結果(我的目錄與教學的目錄不同,所以執行的命令也不一致,可到該地址查看 我的源碼)
至此,我們基本目標已經實現,進階目標希望是由讀者親自完成,也算是對 Node
的一個練習鞏固。
喜歡的話給一顆 star 吧(圖牀上傳工具和博文均屬於原創)。
Star 超過 5 顆我將馬上儘快更新進階篇,教你如何解耦組件,創建一個非技術人員也能使用的圖牀工具。