JavaScript 如何压缩目录并上传？

本文转载自微信公众号「全栈修仙之路」，作者阿宝哥。转载本文请联系全栈修仙之路公众号。

创新互联公司IDC提供业务:成都移动服务器托管,成都服务器租用,成都移动服务器托管,重庆服务器租用等四川省内主机托管与主机租用业务;数据中心含:双线机房,BGP机房,电信机房,移动机房,联通机房。

在日常工作中，文件上传是一个很常见的功能。在上传文件时，我们可以选择上传单个文件，也可以通过设置 multiple 属性来上传多个文件。

本文阿宝哥将介绍如何上传目录及如何压缩目录并上传，压缩目录的功能是通过 JSZip 这个库来实现。利用这个库还可以实现在线预览 ZIP 文件的功能，感兴趣的小伙伴可以阅读 JavaScript 如何在线解压 ZIP 文件? 这篇文章。下面我们先来介绍如何实现压缩目录并上传的功能。

一、浏览器端

1.1 选择目录

在浏览器端，要实现压缩目录并上传的功能。首先我们要先实现选择目录的功能，要实现该功能，我们可以直接使用 HTMLInputElement 元素的 webkitdirectory 属性：

 
 
 
 
      
  
  
  
  1.  
    2.

当设置了 webkitdirectory 属性之后，我们就可以选择目录了。当阿宝哥选择了 useAxios 目录之后，就会显示以下确认框：

点击上传按钮之后，我们就可以获取文件列表。列表中的文件对象上含有一个 webkitRelativePath 属性，用于表示当前文件的相对路径。在进行目录压缩的时候，我们就会使用到该属性。

虽然通过 webkitdirectory 属性可以很容易地实现选择目录的功能，但在实际项目中我们还需要考虑它的兼容性。比如在 IE 11 以下的版本就不支持该属性，其它浏览器的兼容性如下图所示：

(图片来源 —— https://caniuse.com/?search=webkitdirectory)

1.2 压缩目录

在 JavaScript 如何在线解压 ZIP 文件? 这篇文章中，阿宝哥介绍了在浏览器端如何使用 JSZip 这个库实现在线解压 ZIP 文件的功能。JSZip 这个库除了可以解析 ZIP 文件之外，它还可以用来创建和编辑 ZIP 文件。这里阿宝哥基于 JSZip 库提供的 API，封装了一个 generateZipFile 函数：

 
 
 
 
      
  
  
  
  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 文件时，我们可以设置该文件的类型。这里我们设置的默认类型为 blob 类型，除了支持 blob 类型之外，它还支持 base64、uint8array 和 arraybuffer 等类型。

1.3 上传压缩 ZIP 文件

在压缩目录生成 ZIP 文件之后，我们就可以通过 XMLHttpRequest 或 fetch API 来上传压缩文件。下面阿宝哥将以 axios 为例，来实现文件上传的功能。

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) { // 对目录进行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 函数中，如果有启用目录压缩功能，我们就会调用 generateZipFile 函数生成 ZIP 文件，如果没有的话，就会直接调用 uploadFiles 函数来上传目录中的所有文件，当然你也可以对文件列表进行过滤，比如限制文件类型或文件的大小等。

下面我们来看一下 uploadFiles 函数的具体实现：

 
 
 
 
      
  
  
  
  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 函数中，我们通过创建 FormData 对象来保存文件的信息，然后通过 request(axios 实例)来执行上传操作。

二、服务器端

2.1 接收 ZIP 文件

在服务端要实现文件上传功能也比较简单，这里阿宝哥以 koa 为例来实现文件上传的功能。如果你对 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) { // 设置文件的存储目录 
    13.   
  
  
  
  13.     cb(null, UPLOAD_DIR); 
    14.   
  
  
  
  14.   }, 
    15.   
  
  
  
  15.   filename: function (req, file, cb) { // 设置文件名 
    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 这个中间件来处理文件上传，对该中间件感兴趣的小伙伴，可以自行阅读官方文档。接下来，我们来继续讨论另一个问题 —— 如何接收目录并按照文件目录结构进行存放?

2.2 接收文件目录

前面我们已经知道，当 input[type="file"] 使用了 webkitdirectory 属性之后，返回 File 对象的 webkitRelativePath 属性就会存放当前文件相对于当前目录的相对路径：

因此当我们在服务端处理文件目录上传的功能时，我们就可以通过该属性来创建对应的目录结构，具体的处理逻辑如下所示：

 
 
 
 
      
  
  
  
  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); // 确保当前目录存在 
    10.   
  
  
  
  10.     cb(null, fileDir); 
    11.   
  
  
  
  11.   }, 
    12.   
  
  
  
  12.   filename: function (req, file, cb) { 
    13.   
  
  
  
  13.     let parts = file.originalname.split("@"); // 对路径进行拆分 
    14.   
  
  
  
  14.     cb(null, `${parts[parts.length - 1]}`); // 获取文件名 
    15.   
  
  
  
  15.   }, 
    16.   
  
  
  
  16. }); 
    17.

为什么 originalname 文件原始名称会包含 @ 符号呢?这样因为使用 useAxios/demo.vue 这种路径形式时，是不能获取到完整的路径名称，只能获取到文件名。为了解决这个问题，阿宝哥在上传文件时，手动把文件相对路径中的 / 符号替换为 @ 然后再进行上传，对应的处理逻辑如下：

 
 
 
 
      
  
  
  
  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.

好的，压缩目录上传和目录上传已经介绍完了，感兴趣的小伙伴可以动手试试看。由于完整的示例代码内容比较多，阿宝哥就不放具体的代码了。有需要的小伙伴，可以访问以下地址浏览示例代码。

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

注意：以上代码仅供参考，请根据实际业务进行调整。

三、总结

本文阿宝哥介绍了如何利用 input[type="file"] 元素的 webkitdirectory 属性来实现选择目录的功能，然后利用 JSZip 这个库来实现目录压缩，最后通过 axios 来上传目录压缩后的 ZIP 文件 。此外，阿宝哥还介绍了如何使用 koa 来实现接收目录并按照文件目录结构进行存放的功能。

四、参考资源

JSZip 官方文档

MDN - webkitdirectory

JavaScript 如何在线解压 ZIP 文件?

标题名称：JavaScript 如何压缩目录并上传？
路径分享：http://www.shufengxianlan.com/qtweb/news41/122091.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

搜索引擎优化知识

分类信息网站

成都全网营销　　 　边坡防护网　　 　成都网站代运营　　 　成都二枢机房　　 　成都机柜租用　　 　成都营销型网站建设　　 　重庆网站建设公司　　 　注册域名　　 　达州托管服务器　　 　成都小程序开发　　 　公路打桩机　　 　成都标志设计　　 　光华服务器托管　　 　网站设计　　 　梓潼网站设计　　 　自动门　　 　郫县明安消防器材　　 　重庆花箱　　 　网站推广优化　　 　成都网站设计