JavaScript怎么压缩目录并上传
这篇文章给大家分享的是有关JavaScript怎么压缩目录并上传的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
一、浏览器端
1.1 选择目录
在浏览器端,要实现压缩目录并上传的功能。首先我们要先实现选择目录的功能,要实现该功能,我们可以直接使用 HTMLInputElement 元素的 webkitdirectory 属性:
<inputtype="file"id="uploadFile"webkitdirectory/>
当设置了 webkitdirectory 属性之后,我们就可以选择目录了。当阿宝哥选择了 useAxios 目录之后,就会显示以下确认框:
点击上传按钮之后,我们就可以获取文件列表。列表中的文件对象上含有一个 webkitRelativePath 属性,用于表示当前文件的相对路径。在进行目录压缩的时候,我们就会使用到该属性。
虽然通过 webkitdirectory 属性可以很容易地实现选择目录的功能,但在实际项目中我们还需要考虑它的兼容性。比如在 IE 11 以下的版本就不支持该属性,其它浏览器的兼容性如下图所示:
(图片来源 —— https://caniuse.com/?search=webkitdirectory)
1.2 压缩目录
在 JavaScript 如何在线解压 ZIP 文件? 这篇文章中,阿宝哥介绍了在浏览器端如何使用 JSZip 这个库实现在线解压 ZIP 文件的功能。JSZip 这个库除了可以解析 ZIP 文件之外,它还可以用来创建和编辑 ZIP 文件。这里阿宝哥基于 JSZip 库提供的 API,封装了一个 generateZipFile 函数:
functiongenerateZipFile(zipName,files,options={type:"blob",compression:"DEFLATE"}){returnnewPromise((resolve,reject)=>{constzip=newJSZip();for(leti=0;i<files.length;i++){//添加目录中包含的文件zip.file(files[i].webkitRelativePath,files[i]);}zip.generateAsync(options).then(function(blob){//生成zip文件zipName=zipName||Date.now()+".zip";constzipFile=newFile([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 代码
<inputtype="file"id="uploadFile"webkitdirectory/><buttonid="submit"onclick="uploadFile()">上传文件</button>
js 代码
constuploadFileEle=document.querySelector("#uploadFile");constuploadOptions={needZip=true};constrequest=axios.create({baseURL:"http://localhost:3000/",timeout:5000,});asyncfunctionuploadFile({needZip}=uploadOptions){if(!uploadFileEle.files.length)return;letfileList=uploadFileEle.files;if(needZip){//对目录进行ZIP压缩letwebkitRelativePath=fileList[0].webkitRelativePath;letzipFileName=webkitRelativePath.split("/")[0]+".zip";fileList=[awaitgenerateZipFile(zipFileName,fileList)];}uploadFiles({//上传文件列表url:"/upload/multiple",files:fileList,});}
在 uploadFile 函数中,如果有启用目录压缩功能,我们就会调用 generateZipFile 函数生成 ZIP 文件,如果没有的话,就会直接调用 uploadFiles 函数来上传目录中的所有文件,当然你也可以对文件列表进行过滤,比如限制文件类型或文件的大小等。
下面我们来看一下 uploadFiles 函数的具体实现:
functionuploadFiles({url,files,fieldName="file"}){if(!url||!files.length)return;letformData=newFormData();for(leti=0;i<files.length;i++){formData.append(fieldName,files[i],files[i].name);}returnrequest.post(url,formData);}
在 uploadFiles 函数中,我们通过创建 FormData 对象来保存文件的信息,然后通过 request(axios 实例)来执行上传操作。
二、服务器端
2.1 接收 ZIP 文件
在服务端要实现文件上传功能也比较简单,这里阿宝哥以 koa 为例来实现文件上传的功能。如果你对 koa 还不了解的话,建议你先大致浏览一下 koa 的官方文档。
constpath=require("path");constKoa=require("koa");constcors=require("@koa/cors");constmulter=require("@koa/multer");constRouter=require("@koa/router");constapp=newKoa();constrouter=newRouter();constUPLOAD_DIR=path.join(__dirname,"/public/upload");conststorage=multer.diskStorage({destination:asyncfunction(req,file,cb){//设置文件的存储目录cb(null,UPLOAD_DIR);},filename:function(req,file,cb){//设置文件名cb(null,`${file.originalname}`);},});constmulterUpload=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("appstartingatport3000");});
在以上代码中,我们通过 @koa/multer 这个中间件来处理文件上传,对该中间件感兴趣的小伙伴,可以自行阅读官方文档。接下来,我们来继续讨论另一个问题 —— 如何接收目录并按照文件目录结构进行存放?
2.2 接收文件目录
前面我们已经知道,当 input[type="file"] 使用了 webkitdirectory 属性之后,返回 File 对象的 webkitRelativePath 属性就会存放当前文件相对于当前目录的相对路径:
因此当我们在服务端处理文件目录上传的功能时,我们就可以通过该属性来创建对应的目录结构,具体的处理逻辑如下所示:
constfse=require("fs-extra");conststorage=multer.diskStorage({destination:asyncfunction(req,file,cb){//把useAxios@demo.vue中的@替换为路径分隔符letrelativePath=file.originalname.replace(/@/g,path.sep);letindex=relativePath.lastIndexOf(path.sep);letfileDir=path.join(UPLOAD_DIR,relativePath.substr(0,index));//生成文件路径awaitfse.ensureDir(fileDir);//确保当前目录存在cb(null,fileDir);},filename:function(req,file,cb){letparts=file.originalname.split("@");//对路径进行拆分cb(null,`${parts[parts.length-1]}`);//获取文件名},});
为什么 originalname 文件原始名称会包含 @ 符号呢?这样因为使用 useAxios/demo.vue 这种路径形式时,是不能获取到完整的路径名称,只能获取到文件名。为了解决这个问题,阿宝哥在上传文件时,手动把文件相对路径中的 / 符号替换为 @ 然后再进行上传,对应的处理逻辑如下:
functionuploadFiles({url,files,fieldName="file"}){if(!url||!files.length)return;letformData=newFormData();for(leti=0;i<files.length;i++){formData.append(fieldName,files[i],files[i].webkitRelativePath.replace(/\//g,"@"));}returnrequest.post(url,formData);}
好的,压缩目录上传和目录上传已经介绍完了,感兴趣的小伙伴可以动手试试看。由于完整的示例代码内容比较多,阿宝哥就不放具体的代码了。有需要的小伙伴,可以访问以下地址浏览示例代码。
https://gist.github.com/semlinker/af57349c16d203cc2ec845d4b5a6b445
注意:以上代码仅供参考,请根据实际业务进行调整。
感谢各位的阅读!关于“JavaScript怎么压缩目录并上传”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
推荐阅读
-
JavaScript闭包用多会造成内存泄露吗
-
javascript中文乱码如何解决
-
PHP学习第十五天——JavaScript入门DOM对象:二
-
Node.js基本内容和知识点
简单的说node.js就是运行在服务端的JavaScript,起初段定位是后端开发语言,由于技术的不够成熟,一般小型项目...
-
PHP与Node.js:一个史诗般开发者的分享
-
JavaScript 中 find() 和 filter() 方法的区别
JavaScript在ES6上有很多数组方法,每种方法都有独特的用途和好处。在开发应用程序时,大多使用数组方法来获...
-
js怎么跟php结合使用
-
简单说说Node.js和JavaScript
Node.js是一个开源和跨平台的JavaScript运行时环境,在浏览器之外运行V8JavaScript引擎(...
-
前端开发工程师专业技能简历范文
-
JavaScript怎么实现淘宝网图片的局部放大功能