前言你好，我是喵喵侠。最近在找一套素材，看到了一个网站上的素材很实用，于是想要下载下来。一个个的下载属实太麻烦，毕竟图片有好几十张呢。一个个点速度慢，而且很容易遗漏。所以我写了一个Shell脚本来帮我解决这个问题。
思路由于我是前端开发，我想尽量的使用前端相关的技术来做，一开始我只想了两个方案，分别是：
写一个HTML的网页进行批量下载用Node.js 来实现批量下载这两种方式都可以实现我要的功能，下面我来分享下我的实现过程。
实现过程方案一：HTML实现第一个方法是最简单的，只需要本地打开一个这个html页面，简单输入参数后，即可触发下载，于是我写了以下的页面：
源码如下：
代码语言：html复制
图片批量下载工具
提示：浏览器会自动下载图片到默认下载目录，无法指定文件夹。
如遇浏览器拦截，请允许多文件下载。
这样可能会有个问题，当本地或者自己服务器部署的这个页面，访问对方网站服务器资源时，可能会触发跨域。
所以这种方法不是很好，于是我做了新的探索。
方法二：Node.js实现如果你的电脑安装了Node.js，就可以用这个方法，这样的好处是不存在跨域的问题，用node内置的模块就能实现功能。
源码如下：
代码语言：javascript代码运行次数：0运行复制const fs = require('fs');
const path = require('path');
const https = require('https');
const http = require('http');
const readline = require('readline');
// 获取用户输入
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
function ask(question) {
return new Promise(resolve => rl.question(question, resolve));
}
(async () => {
const urlPrefix = await ask('请输入图片URL前缀（如 https://xxx/images/）：');
const startNum = parseInt(await ask('请输入起始编号（如 0）：'), 10);
const endNum = parseInt(await ask('请输入结束编号（如 77）：'), 10);
const ext = await ask('请输入图片格式（如 webp）：');
const saveDir = './我的下载图片';
if (!fs.existsSync(saveDir)) fs.mkdirSync(saveDir);
let success = 0, fail = 0;
function download(url, dest) {
return new Promise((resolve, reject) => {
const mod = url.startsWith('https') ? https : http;
mod.get(url, res => {
if (res.statusCode !== 200) {
reject(new Error('状态码: ' + res.statusCode));
return;
}
const file = fs.createWriteStream(dest);
res.pipe(file);
file.on('finish', () => file.close(resolve));
}).on('error', reject);
});
}
for (let i = startNum; i <= endNum; i++) {
const url = `${urlPrefix}${i}.${ext.replace(/^\./, '')}`;
const dest = path.join(saveDir, `${i}.${ext.replace(/^\./, '')}`);
try {
// eslint-disable-next-line no-await-in-loop
await download(url, dest);
console.log(`下载成功: ${i}.${ext}`);
success++;
} catch (e) {
console.log(`下载失败: ${i}.${ext} (${e.message})`);
fail++;
}
}
console.log(`\n下载完成，成功 ${success} 个，失败 ${fail} 个。图片保存在 ${saveDir} 文件夹。`);
rl.close();
})();输入好参数后，可以看到图片下载完成。
需要注意的是，我写的这个版本都需要手动输入参数，不输入直接回车，就会下载失败。
这个方法也还不错，只是依赖Node.js环境，后面发现还有更简单的方法。
方法三：Bash + Wget实现（推荐）我用的是macOS，自带Bash环境，如果你是Windows，也可以用Git Bash或者WSL中来执行Wget命令。
这个方法就简单多了，5 行命令搞定！
代码语言：bash复制mkdir 我的下载图片
cd 我的下载图片
for i in {0..77}; do
wget https://xxxx.com/images/xxx/webp/$i.webp
done总结下载图片资源这个工具还挺实用的，可以解决批量下载的问题。如果你有多个图片的URL，也可以用类似这样的思路去实现自己的小工具。我这个图片资源正好是按照数字的索引来的，所以实现起来会更简单一些。如果你有更好的实现思路，欢迎评论区分享。