JavaScript 如何壓縮目錄并上傳？

點擊上方關注 TianTianUp，一起學習，天天進步

正文

本文阿寶哥將介紹如何上傳目錄及如何壓縮目錄并上傳，壓縮目錄的功能是通過 JSZip 這個庫來實現。利用這個庫還可以實現在線預覽 ZIP 文件的功能，感興趣的小伙伴可以閱讀  JavaScript 如何在線解壓 ZIP 文件？ 這篇文章。下面我們先來介紹如何實現壓縮目錄并上傳的功能。

一、瀏覽器端

1.1 選擇目錄

在瀏覽器端，要實現壓縮目錄并上傳的功能。首先我們要先實現選擇目錄的功能，要實現該功能，我們可以直接使用 HTMLInputElement 元素的 webkitdirectory 屬性：

<input type="file" id="uploadFile" webkitdirectory />

當設置了 webkitdirectory 屬性之后，我們就可以選擇目錄了。當阿寶哥選擇了 useAxios 目錄之后，就會顯示以下確認框：

點擊上傳按鈕之后，我們就可以獲取文件列表。列表中的文件對象上含有一個 webkitRelativePath 屬性，用于表示當前文件的相對路徑。在進行目錄壓縮的時候，我們就會使用到該屬性。

雖然通過 webkitdirectory 屬性可以很容易地實現選擇目錄的功能，但在實際項目中我們還需要考慮它的兼容性。比如在 IE 11 以下的版本就不支持該屬性，其它瀏覽器的兼容性如下圖所示：

（圖片來源 —— https://caniuse.com/?search=webkitdirectory）

1.2 壓縮目錄

在 JavaScript 如何在線解壓 ZIP 文件？ 這篇文章中，阿寶哥介紹了在瀏覽器端如何使用 JSZip 這個庫實現在線解壓 ZIP 文件的功能。JSZip 這個庫除了可以解析 ZIP 文件之外，它還可以用來創(chuàng)建和編輯 ZIP 文件。這里阿寶哥基于 JSZip 庫提供的 API，封裝了一個 generateZipFile 函數：

function generateZipFile(
  zipName, files,
  options = { type: "blob", compression: "DEFLATE" }
) {
  return new Promise((resolve, reject) => {
    const zip = new JSZip();
    for (let i = 0; i < files.length; i++) { // 添加目錄中包含的文件
      zip.file(files[i].webkitRelativePath, files[i]);
    }
    zip.generateAsync(options).then(function (blob) { // 生成zip文件
      zipName = zipName || Date.now() + ".zip";
      const zipFile = new File([blob], zipName, {
        type: "application/zip",
      });
      resolve(zipFile);
    });
  });
}

在以上代碼中，我們使用 file(name, data [,options]) 方法，把目錄中的文件依次添加到 zip 對象中，然后再通過 generateAsync 方法來生成 ZIP 文件。在生成 ZIP 文件時，我們可以設置該文件的類型。這里我們設置的默認類型為 blob 類型，除了支持 blob 類型之外，它還支持 base64、uint8array 和 arraybuffer 等類型。

1.3 上傳壓縮 ZIP 文件

在壓縮目錄生成 ZIP 文件之后，我們就可以通過 XMLHttpRequest 或 fetch API 來上傳壓縮文件。下面阿寶哥將以 axios 為例，來實現文件上傳的功能。

html 代碼

<input type="file" id="uploadFile" webkitdirectory />
<button id="submit" onclick="uploadFile()">上傳文件</button>

js 代碼

const uploadFileEle = document.querySelector("#uploadFile");
const uploadOptions = { needZip = true };

const request = axios.create({
  baseURL: "http://localhost:3000/",
  timeout: 5000,
});

async function uploadFile({ needZip } = uploadOptions) {
  if (!uploadFileEle.files.length) return;
  let fileList = uploadFileEle.files;
  if (needZip) { // 對目錄進行ZIP壓縮
    let webkitRelativePath = fileList[0].webkitRelativePath;
    let zipFileName = webkitRelativePath.split("/")[0] + ".zip";
    fileList = [await generateZipFile(zipFileName, fileList)];
  }
  uploadFiles({ // 上傳文件列表
    url: "/upload/multiple",
    files: fileList,
  });
}

在 uploadFile 函數中，如果有啟用目錄壓縮功能，我們就會調用 generateZipFile 函數生成 ZIP 文件，如果沒有的話，就會直接調用 uploadFiles 函數來上傳目錄中的所有文件，當然你也可以對文件列表進行過濾，比如限制文件類型或文件的大小等。

下面我們來看一下 uploadFiles 函數的具體實現：

function uploadFiles({ url, files, fieldName = "file" }) {
  if (!url || !files.length) return;
  let formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append(fieldName, files[i], files[i].name);
  }
  return request.post(url, formData);
}

在 uploadFiles 函數中，我們通過創(chuàng)建 FormData 對象來保存文件的信息，然后通過 request（axios 實例）來執(zhí)行上傳操作。

二、服務器端

2.1 接收 ZIP 文件

在服務端要實現文件上傳功能也比較簡單，這里阿寶哥以 koa 為例來實現文件上傳的功能。如果你對 koa 還不了解的話，建議你先大致瀏覽一下 koa 的官方文檔。

const path = require("path");
const Koa = require("koa");
const cors = require("@koa/cors");
const multer = require("@koa/multer");
const Router = require("@koa/router");

const app = new Koa();
const router = new Router();
const UPLOAD_DIR = path.join(__dirname, "/public/upload");

const storage = multer.diskStorage({
  destination: async function (req, file, cb) { // 設置文件的存儲目錄
    cb(null, UPLOAD_DIR);
  },
  filename: function (req, file, cb) { // 設置文件名
    cb(null, `${file.originalname}`);
  },
});

const multerUpload = multer({ storage });

router.get("/", async (ctx) => {
  ctx.body = "壓縮文件目錄上傳示例（阿寶哥）";
});

router.post(
  "/upload/multiple",
  multerUpload.fields([
    {
      name: "file",
    },
  ]),
  async (ctx, next) => {
    ctx.body = {
      status: "success",
      msg: "文件上傳成功",
    };
  }
);

// 注冊中間件
app.use(cors());
app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
  console.log("app starting at port 3000");
});

在以上代碼中，我們通過 @koa/multer 這個中間件來處理文件上傳，對該中間件感興趣的小伙伴，可以自行閱讀官方文檔。接下來，我們來繼續(xù)討論另一個問題 —— 如何接收目錄并按照文件目錄結構進行存放？

2.2 接收文件目錄

前面我們已經知道，當 input[type="file"] 使用了 webkitdirectory 屬性之后，返回 File 對象的 webkitRelativePath 屬性就會存放當前文件相對于當前目錄的相對路徑：

因此當我們在服務端處理文件目錄上傳的功能時，我們就可以通過該屬性來創(chuàng)建對應的目錄結構，具體的處理邏輯如下所示：

const fse = require("fs-extra");

const storage = multer.diskStorage({
  destination: async function (req, file, cb) {
    // 把[email protected]中的@替換為路徑分隔符
    let relativePath = file.originalname.replace(/@/g, path.sep); 
    let index = relativePath.lastIndexOf(path.sep); 
    let fileDir = path.join(UPLOAD_DIR, relativePath.substr(0, index)); // 生成文件路徑
    await fse.ensureDir(fileDir); // 確保當前目錄存在
    cb(null, fileDir);
  },
  filename: function (req, file, cb) {
    let parts = file.originalname.split("@"); // 對路徑進行拆分
    cb(null, `${parts[parts.length - 1]}`); // 獲取文件名
  },
});

為什么 originalname 文件原始名稱會包含 @ 符號呢？這樣因為使用 useAxios/demo.vue 這種路徑形式時，是不能獲取到完整的路徑名稱，只能獲取到文件名。為了解決這個問題，阿寶哥在上傳文件時，手動把文件相對路徑中的 / 符號替換為 @ 然后再進行上傳，對應的處理邏輯如下：

function uploadFiles({ url, files, fieldName = "file" }) {
  if (!url || !files.length) return;
  let formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append(fieldName, files[i], files[i].webkitRelativePath.replace(/\//g, "@"));
  }
  return request.post(url, formData);
}

好的，壓縮目錄上傳和目錄上傳已經介紹完了，感興趣的小伙伴可以動手試試看。由于完整的示例代碼內容比較多，阿寶哥就不放具體的代碼了。有需要的小伙伴，可以訪問以下地址瀏覽示例代碼。

https://gist.github.com/semlinker/af57349c16d203cc2ec845d4b5a6b445

注意：以上代碼僅供參考，請根據實際業(yè)務進行調整。

三、總結

本文阿寶哥介紹了如何利用 input[type="file"] 元素的 webkitdirectory 屬性來實現選擇目錄的功能，然后利用 JSZip 這個庫來實現目錄壓縮，最后通過 axios 來上傳目錄壓縮后的 ZIP 文件 。此外，阿寶哥還介紹了如何使用 koa 來實現接收目錄并按照文件目錄結構進行存放的功能。

四、參考資源

• JSZip 官方文檔
• MDN - webkitdirectory
• JavaScript 如何在線解壓 ZIP 文件？

1. 一道字節(jié)筆試題，沒有想到考察的是....

2. JavaScript中延遲加載屬性
   

3. 幾張動圖帶你回顧JS的變量提升
   
4. 幾張動圖帶你回顧event loop
   
5. 看了就會的瀏覽器幀原理