日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript 如何壓縮目錄并上傳？

本文轉(zhuǎn)載自微信公眾號「全棧修仙之路」，作者阿寶哥。轉(zhuǎn)載本文請聯(lián)系全棧修仙之路公眾號。

創(chuàng)新互聯(lián)公司IDC提供業(yè)務(wù):成都移動(dòng)服務(wù)器托管,成都服務(wù)器租用,成都移動(dòng)服務(wù)器托管,重慶服務(wù)器租用等四川省內(nèi)主機(jī)托管與主機(jī)租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機(jī)房,BGP機(jī)房,電信機(jī)房,移動(dòng)機(jī)房,聯(lián)通機(jī)房。

在日常工作中，文件上傳是一個(gè)很常見的功能。在上傳文件時(shí)，我們可以選擇上傳單個(gè)文件，也可以通過設(shè)置 multiple 屬性來上傳多個(gè)文件。

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

一、瀏覽器端

1.1 選擇目錄

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

 
 
 
 
      
  
  
  
  1.  
    2.

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

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

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

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

1.2 壓縮目錄

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

 
 
 
 
      
  
  
  
  1. function generateZipFile( 
    2.   
  
  
  
  2.   zipName, files, 
    3.   
  
  
  
  3.   options = { type: "blob", compression: "DEFLATE" } 
    4.   
  
  
  
  4. ) { 
    5.   
  
  
  
  5.   return new Promise((resolve, reject) => { 
    6.   
  
  
  
  6.     const zip = new JSZip(); 
    7.   
  
  
  
  7.     for (let i = 0; i < files.length; i++) { // 添加目錄中包含的文件 
    8.   
  
  
  
  8.       zip.file(files[i].webkitRelativePath, files[i]); 
    9.   
  
  
  
  9.     } 
    10.   
  
  
  
  10.     zip.generateAsync(options).then(function (blob) { // 生成zip文件 
    11.   
  
  
  
  11.       zipName = zipName || Date.now() + ".zip"; 
    12.   
  
  
  
  12.       const zipFile = new File([blob], zipName, { 
    13.   
  
  
  
  13.         type: "application/zip", 
    14.   
  
  
  
  14.       }); 
    15.   
  
  
  
  15.       resolve(zipFile); 
    16.   
  
  
  
  16.     }); 
    17.   
  
  
  
  17.   }); 
    18.   
  
  
  
  18. } 
    19.

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

1.3 上傳壓縮 ZIP 文件

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

html 代碼

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2. 上傳文件 
    3.

js 代碼

 
 
 
 
      
  
  
  
  1. const uploadFileEle = document.querySelector("#uploadFile"); 
    2.   
  
  
  
  2. const uploadOptions = { needZip = true }; 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. const request = axios.create({ 
    5.   
  
  
  
  5.   baseURL: "http://localhost:3000/", 
    6.   
  
  
  
  6.   timeout: 5000, 
    7.   
  
  
  
  7. }); 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. async function uploadFile({ needZip } = uploadOptions) { 
    10.   
  
  
  
  10.   if (!uploadFileEle.files.length) return; 
    11.   
  
  
  
  11.   let fileList = uploadFileEle.files; 
    12.   
  
  
  
  12.   if (needZip) { // 對目錄進(jìn)行ZIP壓縮 
    13.   
  
  
  
  13.     let webkitRelativePath = fileList[0].webkitRelativePath; 
    14.   
  
  
  
  14.     let zipFileName = webkitRelativePath.split("/")[0] + ".zip"; 
    15.   
  
  
  
  15.     fileList = [await generateZipFile(zipFileName, fileList)]; 
    16.   
  
  
  
  16.   } 
    17.   
  
  
  
  17.   uploadFiles({ // 上傳文件列表 
    18.   
  
  
  
  18.     url: "/upload/multiple", 
    19.   
  
  
  
  19.     files: fileList, 
    20.   
  
  
  
  20.   }); 
    21.   
  
  
  
  21. } 
    22.

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

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

 
 
 
 
      
  
  
  
  1. function uploadFiles({ url, files, fieldName = "file" }) { 
    2.   
  
  
  
  2.   if (!url || !files.length) return; 
    3.   
  
  
  
  3.   let formData = new FormData(); 
    4.   
  
  
  
  4.   for (let i = 0; i < files.length; i++) { 
    5.   
  
  
  
  5.     formData.append(fieldName, files[i], files[i].name); 
    6.   
  
  
  
  6.   } 
    7.   
  
  
  
  7.   return request.post(url, formData); 
    8.   
  
  
  
  8. } 
    9.

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

二、服務(wù)器端

2.1 接收 ZIP 文件

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

 
 
 
 
      
  
  
  
  1. const path = require("path"); 
    2.   
  
  
  
  2. const Koa = require("koa"); 
    3.   
  
  
  
  3. const cors = require("@koa/cors"); 
    4.   
  
  
  
  4. const multer = require("@koa/multer"); 
    5.   
  
  
  
  5. const Router = require("@koa/router"); 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. const app = new Koa(); 
    8.   
  
  
  
  8. const router = new Router(); 
    9.   
  
  
  
  9. const UPLOAD_DIR = path.join(__dirname, "/public/upload"); 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. const storage = multer.diskStorage({ 
    12.   
  
  
  
  12.   destination: async function (req, file, cb) { // 設(shè)置文件的存儲(chǔ)目錄 
    13.   
  
  
  
  13.     cb(null, UPLOAD_DIR); 
    14.   
  
  
  
  14.   }, 
    15.   
  
  
  
  15.   filename: function (req, file, cb) { // 設(shè)置文件名 
    16.   
  
  
  
  16.     cb(null, `${file.originalname}`); 
    17.   
  
  
  
  17.   }, 
    18.   
  
  
  
  18. }); 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20. const multerUpload = multer({ storage }); 
    21.   
  
  
  
  21.  
    22.   
  
  
  
  22. router.get("/", async (ctx) => { 
    23.   
  
  
  
  23.   ctx.body = "壓縮文件目錄上傳示例（阿寶哥）"; 
    24.   
  
  
  
  24. }); 
    25.   
  
  
  
  25.  
    26.   
  
  
  
  26. router.post( 
    27.   
  
  
  
  27.   "/upload/multiple", 
    28.   
  
  
  
  28.   multerUpload.fields([ 
    29.   
  
  
  
  29.     { 
    30.   
  
  
  
  30.       name: "file", 
    31.   
  
  
  
  31.     }, 
    32.   
  
  
  
  32.   ]), 
    33.   
  
  
  
  33.   async (ctx, next) => { 
    34.   
  
  
  
  34.     ctx.body = { 
    35.   
  
  
  
  35.       status: "success", 
    36.   
  
  
  
  36.       msg: "文件上傳成功", 
    37.   
  
  
  
  37.     }; 
    38.   
  
  
  
  38.   } 
    39.   
  
  
  
  39. ); 
    40.   
  
  
  
  40.  
    41.   
  
  
  
  41. // 注冊中間件 
    42.   
  
  
  
  42. app.use(cors()); 
    43.   
  
  
  
  43. app.use(router.routes()).use(router.allowedMethods()); 
    44.   
  
  
  
  44.  
    45.   
  
  
  
  45. app.listen(3000, () => { 
    46.   
  
  
  
  46.   console.log("app starting at port 3000"); 
    47.   
  
  
  
  47. }); 
    48.

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

2.2 接收文件目錄

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

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

 
 
 
 
      
  
  
  
  1. const fse = require("fs-extra"); 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. const storage = multer.diskStorage({ 
    4.   
  
  
  
  4.   destination: async function (req, file, cb) { 
    5.   
  
  
  
  5.     // 把useAxios@demo.vue中的@替換為路徑分隔符 
    6.   
  
  
  
  6.     let relativePath = file.originalname.replace(/@/g, path.sep);  
    7.   
  
  
  
  7.     let index = relativePath.lastIndexOf(path.sep);  
    8.   
  
  
  
  8.     let fileDir = path.join(UPLOAD_DIR, relativePath.substr(0, index)); // 生成文件路徑 
    9.   
  
  
  
  9.     await fse.ensureDir(fileDir); // 確保當(dāng)前目錄存在 
    10.   
  
  
  
  10.     cb(null, fileDir); 
    11.   
  
  
  
  11.   }, 
    12.   
  
  
  
  12.   filename: function (req, file, cb) { 
    13.   
  
  
  
  13.     let parts = file.originalname.split("@"); // 對路徑進(jìn)行拆分 
    14.   
  
  
  
  14.     cb(null, `${parts[parts.length - 1]}`); // 獲取文件名 
    15.   
  
  
  
  15.   }, 
    16.   
  
  
  
  16. }); 
    17.

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

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

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

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

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

三、總結(jié)

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

四、參考資源

JSZip 官方文檔

MDN - webkitdirectory

JavaScript 如何在線解壓 ZIP 文件?


網(wǎng)站欄目：JavaScript 如何壓縮目錄并上傳？
當(dāng)前地址：http://m.5511xx.com/article/cohjgoh.html