Node使用archiver实现多文件打包下载
技术:vue.js、node、archiver
直接上经典代码
部分页面代码:
<ul>
<li v-for="(item,i) in newsDetail.filePath" :key="i">
<a :href="item" :download="newsDetail.fileName[i]"><i :class="newsDetail.fileType[i]"></i>
{{newsDetail.fileName[i]}}</a>
</li>
</ul>
<p v-if="newsDetail.filePath.length > 0">
<button class="btn btn-sm btn-primary" @click="downloadPackage">一键下载</button>
</p>
<p>
<h4 class="mt-5">当前无可下载资源</h4>
</p>
下载的js代码:
$.post("/package/packageZip", { // 路径为后台打包的路径
dirList: this.newsDetail.filePath // dirList当前打包内容路径列表 数据就不写了
}).then(res => {
console.log(res);
if (res.code != 200) { // 后台返回错误信息
layer.msg("由于网络原因,打包下载失败");
return;
}
var id = Date.now() + "DOWNLOAD"; // 下载按钮的Id
$(`<a id="${id}" href='${res.data.packagePath}' download=''></a>`).appendTo("body"); // 创建下载按钮
var e = document.createEvent("MouseEvents"); // 添加事件
e.initEvent("click", true, true);
document.getElementById(id).dispatchEvent(e); // 执行
})
!!!Node!!!
1.首先需要安装archiver的依赖包
npm install archiver
2.我在后端对文件的名字做的md5加密所以引入了md5模块
npm install md5
3.重要的一个东西---- fs 模块
router.post("/packageZip", (req, res) => {
var dirList = req.body.dirList;
console.log(dirList);
// 创建一个加密后的文件名
var fileName = MD5(dirList.join() + Date.now()).substr(0, 18);
// 创建一个输出路径
var output = fs.createWriteStream(
__dirname + "/../public/download/" + fileName + ".zip"
);
// 处理压缩的级别
var archive = archiver("zip", {
zlib: { level: 9 }
});
output.on("close", function() {
console.log(archive.pointer() + " total bytes");
});
output.on("end", function() {
console.log("Data has been drained");
});
// 打包异常返回前端错误状态码
archive.on("warning", function(err) {
if (err.code === "ENOENT") {
// log warning
console.log(err);
res.send({
code: 201,
message: "当前网络可能存在问题,暂时无法打包"
});
return;
} else {
// throw error
console.log(err);
res.send({
code: 201,
message: "由于网络原因,打包失败"
});
return;
}
});
// 打包错误返回前端状态码
archive.on("error", function(err) {
console.log(err);
res.send({
code: 201,
message: "由于网络原因,打包失败"
});
return;
});
// 输出压缩包到指定的文件
archive.pipe(output);
// 将前端传过来的文件路径对应的文件追加到压缩包中
dirList.forEach((v, i) => {
archive.append(fs.createReadStream(__dirname + "/../public/" + v), {
name: Date.now() + i + v.substr(v.lastIndexOf("-") + 1)
});
});
// 至此 压缩完成
archive.finalize();
// 在这里返回打包后的压缩包路径供下载
res.send({
code: 200,
message: "打包成功,等待下载",
data: {
packagePath: "/download/" + fileName + ".zip"
}
});
});
当时写的一个垃圾设计,英语学习网,有什么不对的,大佬们多多指点啊!!!!!!!