這篇文章給大家分享的是有關(guān)JavaScript怎么壓縮目錄并上傳的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

冷水灘網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),冷水灘網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為冷水灘數(shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的冷水灘做網(wǎng)站的公司定做！

一、瀏覽器端

1.1 選擇目錄

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

當(dāng)設(shè)置了 webkitdirectory 屬性之后，我們就可以選擇目錄了。當(dāng)阿寶哥選擇了 useAxios 目錄之后，就會(huì)顯示以下確認(rèn)框：

點(diǎn)擊上傳按鈕之后，我們就可以獲取文件列表。列表中的文件對(duì)象上含有一個(gè) webkitRelativePath  屬性，用于表示當(dāng)前文件的相對(duì)路徑。在進(jìn)行目錄壓縮的時(shí)候，我們就會(huì)使用到該屬性。

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

(圖片來源 —— https://caniuse.com/?search=webkitdirectory)

1.2 壓縮目錄

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

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 對(duì)象中，然后再通過  generateAsync 方法來生成 ZIP 文件。在生成 ZIP 文件時(shí)，我們可以設(shè)置該文件的類型。這里我們?cè)O(shè)置的默認(rèn)類型為 blob 類型，除了支持  blob 類型之外，它還支持 base64、uint8array 和 arraybuffer 等類型。

1.3 上傳壓縮 ZIP 文件

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

html 代碼

 上傳文件

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) { // 對(duì)目錄進(jìn)行ZIP壓縮     let webkitRelativePath = fileList[0].webkitRelativePath;     let zipFileName = webkitRelativePath.split("/")[0] + ".zip";     fileList = [await generateZipFile(zipFileName, fileList)];   }   uploadFiles({ // 上傳文件列表     url: "/upload/multiple",     files: fileList,   }); }

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

下面我們來看一下 uploadFiles 函數(shù)的具體實(shí)現(xiàn)：

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 函數(shù)中，我們通過創(chuàng)建 FormData 對(duì)象來保存文件的信息，然后通過 request(axios  實(shí)例)來執(zhí)行上傳操作。

二、服務(wù)器端

2.1 接收 ZIP 文件

在服務(wù)端要實(shí)現(xiàn)文件上傳功能也比較簡(jiǎn)單，這里阿寶哥以 koa 為例來實(shí)現(xiàn)文件上傳的功能。如果你對(duì) 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) { // 設(shè)置文件的存儲(chǔ)目錄     cb(null, UPLOAD_DIR);   },   filename: function (req, file, cb) { // 設(shè)置文件名     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: "文件上傳成功",     };   } );  // 注冊(cè)中間件 app.use(cors()); app.use(router.routes()).use(router.allowedMethods());  app.listen(3000, () => {   console.log("app starting at port 3000"); });

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

2.2 接收文件目錄

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

因此當(dāng)我們?cè)诜?wù)端處理文件目錄上傳的功能時(shí)，我們就可以通過該屬性來創(chuàng)建對(duì)應(yīng)的目錄結(jié)構(gòu)，具體的處理邏輯如下所示：

const fse = require("fs-extra");  const storage = multer.diskStorage({   destination: async function (req, file, cb) {     // 把useAxios@demo.vue中的@替換為路徑分隔符     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); // 確保當(dāng)前目錄存在     cb(null, fileDir);   },   filename: function (req, file, cb) {     let parts = file.originalname.split("@"); // 對(duì)路徑進(jìn)行拆分     cb(null, `${parts[parts.length - 1]}`); // 獲取文件名   }, });

為什么 originalname 文件原始名稱會(huì)包含 @ 符號(hào)呢?這樣因?yàn)槭褂?useAxios/demo.vue  這種路徑形式時(shí)，是不能獲取到完整的路徑名稱，只能獲取到文件名。為了解決這個(gè)問題，阿寶哥在上傳文件時(shí)，手動(dòng)把文件相對(duì)路徑中的 / 符號(hào)替換為 @  然后再進(jìn)行上傳，對(duì)應(yīng)的處理邏輯如下：

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); }

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

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

注意：以上代碼僅供參考，請(qǐng)根據(jù)實(shí)際業(yè)務(wù)進(jìn)行調(diào)整。

感謝各位的閱讀！關(guān)于“JavaScript怎么壓縮目錄并上傳”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！