当前位置: 首页 > news >正文

根据URL批量下载文件并压缩成zip文件

在这里插入图片描述
根据url批量下载图片或者视频,只需要将图片的url和名称放到数组对象即可,例如:

let fileArr = [{fvUrl:'https://image.xuboren.com/image/2023/07/26/1410829074764cdbaa4314a084eb749e.jpg',fvName: '图片名称'},{fvUrl:'https://image.xuboren.com/image/2023/07/26/49536f24f07b4d0eb0e43171019c5f1f.jpg',fvName: '图片名称2'}
]

将fileArr文件传入到下面的函数中

npm install jszip --save npm install file-saver --savenpm install axios
// loadZip.js
import JSZip from 'jszip'
import FileSaver from 'file-saver'
import axios from 'axios';// 批量打包下载
// fileArr下载的list:例如:
const loadZip = async (fileArr, zipName = '下载文件') => {fileArr.forEach(el=>{el.fvName = `${el.fvName}.${el.fvUrl.split('.').at(-1)}`  // 截取url的后缀名添加到文件名: fvname.jpg})const zip = new JSZip() // 创建实例对象const promises = []// 遍历生成下载文件fileArr.forEach((item) => {const promise = getFile(item.fvUrl).then((res) => {const fvName = item.fvName + ''// 创建文件用file(),创建文件夹用 floder()zip.file(fvName, res.data, {binary: true})})promises.push(promise)})/** 
Promise.all() 静态方法接受一个 Promise 可迭代对象作为输入,并返回一个 Promise。当所有输入的 Promise 都被兑现时,返回的 Promise 也将被兑现(即使传入的是一个空的可迭代对象),并返回一个包含所有兑现值的数组。如果输入的任何 Promise 被拒绝,则返回的 Promise 将被拒绝,并带有第一个被拒绝的原因。只有当all([p1, p2, p3]) 中的每一个 Promise 实例的状态都变成 fulfilled, Promise.all()的状态才会变成 fulfilled,此时  p1, p2, p3 的返回值组成一个数据,传给 Promise.all()的回调函数只要 p1, p2, p3 中任何一个被 rejected,  Promise.all() 的状态就会变成 rejected,此时第一个被 rejected 的实例的返回值,会传给 Promise.all()的回调函数。在上面的代码中,promises 数组中的每一个元素,都是 Promise 实例,所以需要用到 Promise.all()*/// 生成 zip 文件Promise.all(promiseAll).then(() => {// 生成zip 文件zip.generateAsync({type: 'blob',  // 文件格式compression: 'DEFLATE', // STORE: 默认不压缩, DEFLATE:需要压缩compressionOptions: {level: 9 // 压缩等级 1~9   1 压缩速度最快, 9 最优压缩方式}}).then((res) => {FileSaver.saveAs(res, `${zipName}.zip`) // 使用FileSaver.saveAs保存文件,文件名可自定义})})
}// 这一步为下载文件步骤,通过传入的url下载文件
// 将文件 url 格式转换为 Bolb 类型格式 或者 arraybuffer 格式
const getFile = (fvUrl) => {return new Promise((resolve, reject) => {axios(fvUrl, {method: 'get',  // get请求responseType: 'blob' // 返回的数据会被强制转为blob类型 ,转换成arraybuffer 也行}).then((res) => {resolve(res) // 将下载的文件返回}).catch(err => {reject(err)})})
}export default loadZip;

函数封装好后,在对应的页面引入该函数,然后将fileArr, zipName传入即可,例如:

// 需要使用的页面
// ...其他逻辑
loadZip(fileArr, zipName);

需要注意的是,图片视频下载可能会跨域,这个需要后端配合解决,也有可能是oss配置的问题。

参考文章:https://blog.csdn.net/qq_41131745/article/details/128874556

相关文章:

根据URL批量下载文件并压缩成zip文件

根据url批量下载图片或者视频,只需要将图片的url和名称放到数组对象即可,例如: let fileArr [{fvUrl:https://image.xuboren.com/image/2023/07/26/1410829074764cdbaa4314a084eb749e.jpg,fvName: 图片名称},{fvUrl:https://image.xuboren.…...

机器学习笔记之优化算法(六)线搜索方法(步长角度;非精确搜索;Glodstein Condition)

机器学习笔记之优化算法——线搜索方法[步长角度,非精确搜索,Glodstein Condition] 引言回顾: Armijo Condition \text{Armijo Condition} Armijo Condition关于 Armijo Condition \text{Armijo Condition} Armijo Condition的弊端 Glodstein…...

Ant Design Pro 封装网络请求

可以直接在antdPro项目的app.tsx文件中对request进行运行时配置,并且该配置会直接透传到umi-request的全局配置。后续直接从umi中引入request或者useRequest直接使用,可以说是非常方便。文档可查看:umi.js 具体配置代码: import…...

命令模式——请求发送者与接收者解耦

1、简介 1.1、概述 在软件开发中,经常需要向某些对象发送请求(调用其中的某个或某些方法),但是并不知道请求的接收者是谁,也不知道被请求的操作是哪个。此时,特别希望能够以一种松耦合的方式来设计软件&a…...

css 利用模糊属性 制作水滴

<style>.box {background-color: #111;height: 100vh;display: flex;justify-content: center;align-items: center;/* 对比度*/filter: contrast(20);}.drop {width: 150px;height: 159px;border-radius: 50%;background-color: #fff;position: absolute;/* 模糊 */filt…...

怎么才能提升自己工作能力?

表现最好的员工通常是获得加薪和工作晋升的人。您可以采取某些措施来提高您的工作绩效&#xff0c;并帮助您的主管将您视为他们最好的员工之一。在本文中&#xff0c;我们列出了 12 个技巧&#xff0c;可以立即提高您的工作绩效。 什么是工作绩效&#xff1f; 工作绩效是指您…...

Android Framework 之 Zygote

Android Zygote Android Zygote 是 Android 操作系统中一个关键的系统服务&#xff0c;它在系统启动时加载&#xff0c;为应用程序的运行提供了一种快速且资源高效的方式。 Zygote 的主要作用如下&#xff1a; 预加载共享库和类&#xff1a;Zygote 启动时&#xff0c;会预先加…...

二叉树的中序遍历 LeetCode热题100

题目 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 思路 递归&#xff0c;按左中右的顺序添加节点。 利用栈先进后出的特性模拟递归。 代码 /**递归写法* Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left…...

IOS + Appium自动化教程

前言 项目闲置下来了&#xff0c;终于抽空有时间搞自动化了&#xff0c;看了下网上的教程基本通篇都是android自动化的介绍 &#xff0c;ios自动化方面的内容网上简介的少之可怜。由于本人对ios自动化也是第一次做&#xff0c;甚至对苹果电脑的使用都不太熟悉&#xff0c;花了大…...

100个精选Python实战项目案例,在线无偿分享

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 随着 Python 语言的流行&#xff0c;越来越多的人加入到了 Python 的大家庭中。 为什么这么多人学 Python &#xff1f; 我要喊出那句话了&#xff1a;“人生苦短&#xff0c;我用 Python&#xff01;”&#xff0c; 正是…...

JSON语法

目录 一、JSON 语法规则 二、JSON 的两种结构&#xff1a; 三、JSON 名称/值对 JSON 值 JSON 数字 JSON 对象 JSON 数组 JSON 布尔值 JSON null 四、JSON 使用 JavaScript 语法 JSON 语法是 JavaScript 语法的子集。 一、JSON 语法规则 JSON 语法是 JavaScript 对象…...

PostMan+Jmeter+QTP工具介绍及安装

目录 一、PostMan介绍​编辑 二、下载安装 三、Postman与Jmeter的区别 一、开发语言区别&#xff1a; 二、使用范围区别&#xff1a; 三、使用区别&#xff1a; 四、Jmeter安装 附一个详细的Jmeter按照新手使用教程&#xff0c;感谢作者&#xff0c;亲测有效。 五、Jme…...

2023电赛E题视觉部分

该部分主要要完成正方形区域的识别&#xff0c;并返回对应的坐标&#xff0c;但是由于距离1m&#xff0c;过远。因此需要引入图像增强&#xff0c;下面代码完成基本流程测试&#xff0c;仅供参考&#xff1a; import sensor import image import time # 初始化摄像头 senso…...

算法工程师岗位面试必备,讲透深度学习面试题,详解人工智能生成式任务与AI大模型面试题

DeepLearning-Interview-Awesome-2024 算法工程师岗位面试必备&#xff0c;讲透深度学习面试题&#xff0c;详解人工智能生成式任务与AI大模型面试题 实时更新题解链接&#xff1a;https://github.com/315386775/DeepLearing-Interview-Awesome-2024 记得点个关注&#xff0…...

JVM基础篇-虚拟机栈

JVM基础篇-虚拟机栈 定义 Java Virtual Machine Stacks &#xff08;Java 虚拟机栈&#xff09; 每个线程运行时所需要的内存&#xff0c;称为虚拟机栈每个栈由多个栈帧&#xff08;Frame&#xff09;组成&#xff0c;对应着每次方法调用时所占用的内存每个线程只能有一个活动…...

KepwareEX配置API REST接口

服务端Kepware设置 API允许连接设置 创建通道 请求地址(POST)&#xff1a; https://<主机名_或_ip>:<端口>/config/v1/project/channels 以下示例使用postman工具访问API创建了一个名为Channel1 的通道&#xff0c;其使用在本地主机运行的服务器中的Simulator …...

【python】python求解矩阵的转置(详细讲解)

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…...

Mr. Cappuccino的第56杯咖啡——Mybatis拦截器

Mybatis拦截器 概述应用场景项目结构实现分页查询其它拦截器的使用 概述 Mybatis允许使用者在映射语句执行过程中的某一些指定的节点进行拦截调用&#xff0c;通过织入拦截器&#xff0c;在不同节点修改一些执行过程中的关键属性&#xff0c;从而影响SQL的生成、执行和返回结果…...

容器化安装环境EFK搭建

容器化安装环境 Docker中安装并启动ElasticSearch 前置配置 第一步&#xff1a;在宿主机上执行echo “net.ipv4.ip_forward1” >>/usr/lib/sysctl.d/00-system.conf 2.第二步&#xff1a;重启network和docker服务 [rootlocalhost /]# systemctl restart network &&…...

基于 Debian GNU/Linux 12 “书虫 “的Neptune 8.0 “Juna “来了

导读Neptune Linux 发行版背后的团队发布了 Neptune 8.0&#xff0c;作为这个基于 Debian 的 GNU/Linux 发行版的重大更新&#xff0c;它围绕最新的 KDE Plasma 桌面环境构建。 Neptune 8.0 被命名为 “Juna”&#xff0c;是在Neptune 7.5 发布 11 个月后发布的&#xff0c;也是…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...