位置：文档库 > JavaScript > 在node.js中如何实现下载图片

在node.js中如何实现下载图片

月亮便利店上传于 2024-02-04 07:42

《在Node.js中如何实现下载图片》

在Node.js生态中，图片下载是常见的后端需求，无论是从第三方API获取资源、爬取网页图片，还是构建自动化工具，都需要掌握高效的图片下载方法。本文将系统介绍Node.js中实现图片下载的多种方案，涵盖基础HTTP请求、流式处理、并发控制、错误处理等核心场景，并提供完整的代码示例。

一、基础方案：使用原生HTTP模块

Node.js内置的http和https模块是实现图片下载的最基础方式。通过发起GET请求获取二进制数据，再写入本地文件。以下是一个完整示例：

const https = require('https');
const fs = require('fs');

function downloadImage(url, filePath) {
  return new Promise((resolve, reject) => {
    https.get(url, (response) => {
      if (response.statusCode !== 200) {
        reject(new Error(`请求失败，状态码：${response.statusCode}`));
        return;
      }

      const fileStream = fs.createWriteStream(filePath);
      response.pipe(fileStream);

      fileStream.on('finish', () => {
        fileStream.close();
        resolve(`图片已保存至：${filePath}`);
      });

      fileStream.on('error', (err) => {
        fs.unlink(filePath, () => {}); // 删除已创建的空文件
        reject(err);
      });
    }).on('error', (err) => {
      reject(err);
    });
  });
}

// 使用示例
downloadImage('https://example.com/image.jpg', './downloads/image.jpg')
  .then(console.log)
  .catch(console.error);

此方案特点：

无需安装第三方库
通过流式处理避免内存溢出
适合简单场景，但缺乏高级功能（如重试机制、进度显示）

二、进阶方案：使用Axios库

Axios是基于Promise的HTTP客户端，支持请求/响应拦截、自动转换数据、取消请求等特性。安装Axios后（npm install axios），可实现更简洁的代码：

const axios = require('axios');
const fs = require('fs');
const path = require('path');

async function downloadWithAxios(url, outputDir) {
  try {
    const response = await axios({
      method: 'get',
      url: url,
      responseType: 'stream' // 关键配置，获取流数据
    });

    const fileName = path.basename(url);
    const filePath = path.join(outputDir, fileName);
    const writer = fs.createWriteStream(filePath);

    response.data.pipe(writer);

    return new Promise((resolve, reject) => {
      writer.on('finish', () => resolve(`下载成功：${filePath}`));
      writer.on('error', reject);
    });
  } catch (error) {
    throw new Error(`下载失败：${error.message}`);
  }
}

// 使用示例
downloadWithAxios('https://example.com/photo.png', './assets')
  .then(console.log)
  .catch(console.error);

Axios方案优势：

支持请求取消（通过CancelToken）
自动处理重定向和304缓存
可结合拦截器实现统一错误处理

三、高级方案：流式处理与进度监控

对于大文件下载，需要实时显示进度并处理网络波动。以下实现包含进度条和断点续传功能：

const axios = require('axios');
const fs = require('fs');
const path = require('path');
const cliProgress = require('cli-progress'); // 进度条库

async function advancedDownload(url, outputPath) {
  const fileName = path.basename(url);
  const tempPath = `${outputPath}.tmp`;
  let downloadedSize = 0;

  // 检查临时文件是否存在（断点续传）
  try {
    const stats = fs.statSync(tempPath);
    downloadedSize = stats.size;
  } catch (e) {
    // 文件不存在，忽略错误
  }

  const response = await axios({
    method: 'get',
    url: url,
    responseType: 'stream',
    headers: { 'Range': `bytes=${downloadedSize}-` } // 请求剩余部分
  });

  const totalSize = parseInt(response.headers['content-length'], 10) + downloadedSize;
  const writer = fs.createWriteStream(tempPath, { flags: 'a' }); // 追加模式

  // 初始化进度条
  const bar = new cliProgress.SingleBar({
    format: '下载进度 |{bar}| {percentage}% | {value}/{total} bytes',
    barCompleteChar: '\u2588',
    barIncompleteChar: '\u2591'
  });
  bar.start(totalSize, downloadedSize);

  response.data.on('data', (chunk) => {
    downloadedSize += chunk.length;
    bar.update(downloadedSize);
  });

  response.data.pipe(writer);

  return new Promise((resolve, reject) => {
    writer.on('finish', () => {
      fs.renameSync(tempPath, outputPath); // 重命名为最终文件名
      bar.stop();
      resolve(`下载完成：${outputPath}`);
    });

    writer.on('error', (err) => {
      fs.unlinkSync(tempPath); // 清理临时文件
      bar.stop();
      reject(err);
    });
  });
}

// 使用示例
advancedDownload(
  'https://example.com/large-file.jpg',
  './downloads/large-file.jpg'
).then(console.log).catch(console.error);

关键点说明：

使用Range头实现断点续传
临时文件避免下载中断导致数据丢失
cli-progress库提供可视化进度反馈

四、并发控制与批量下载

当需要同时下载多个图片时，需控制并发数防止服务器拒绝请求。以下实现基于p-limit库的并发控制：

const axios = require('axios');
const fs = require('fs');
const path = require('path');
const pLimit = require('p-limit'); // 并发控制库

async function batchDownload(urls, outputDir, concurrency = 3) {
  const limit = pLimit(concurrency);
  const tasks = urls.map(url => 
    limit(() => downloadSingle(url, outputDir))
  );

  try {
    return await Promise.all(tasks);
  } catch (error) {
    throw new Error(`批量下载失败：${error.message}`);
  }
}

async function downloadSingle(url, outputDir) {
  const fileName = path.basename(url);
  const filePath = path.join(outputDir, fileName);
  
  // 简化版下载逻辑（实际可用前述方案）
  const response = await axios({
    method: 'get',
    url: url,
    responseType: 'stream'
  });

  const writer = fs.createWriteStream(filePath);
  response.data.pipe(writer);

  return new Promise((resolve, reject) => {
    writer.on('finish', () => resolve(`${url} -> ${filePath}`));
    writer.on('error', reject);
  });
}

// 使用示例
const imageUrls = [
  'https://example.com/img1.jpg',
  'https://example.com/img2.jpg',
  // ...更多URL
];

batchDownload(imageUrls, './batch-downloads', 5)
  .then(results => console.log('所有下载完成：', results))
  .catch(console.error);

五、错误处理与重试机制

网络请求可能因各种原因失败，需实现自动重试逻辑。以下示例使用递归实现指数退避重试：

const axios = require('axios');
const fs = require('fs');

async function downloadWithRetry(url, outputPath, maxRetries = 3) {
  let retryCount = 0;

  async function attemptDownload() {
    try {
      const response = await axios({
        method: 'get',
        url: url,
        responseType: 'stream'
      });

      const writer = fs.createWriteStream(outputPath);
      response.data.pipe(writer);

      return new Promise((resolve, reject) => {
        writer.on('finish', resolve);
        writer.on('error', reject);
      });
    } catch (error) {
      if (retryCount >= maxRetries) {
        throw new Error(`达到最大重试次数：${maxRetries}`);
      }
      
      const delay = 1000 * Math.pow(2, retryCount); // 指数退避
      retryCount++;
      console.log(`下载失败，第${retryCount}次重试，等待${delay}ms...`);
      
      await new Promise(resolve => setTimeout(resolve, delay));
      return attemptDownload();
    }
  }

  return attemptDownload();
}

// 使用示例
downloadWithRetry('https://example.com/unstable.jpg', './retry-test.jpg')
  .then(() => console.log('下载成功'))
  .catch(console.error);

六、性能优化：内存管理与缓存策略

对于高频下载场景，需考虑以下优化：

内存缓存：使用node-cache库缓存已下载图片
磁盘缓存：按日期分目录存储，避免单个目录文件过多
请求复用：保持HTTP连接池（Axios默认启用）

const NodeCache = require('node-cache');
const axios = require('axios');
const fs = require('fs');
const path = require('path');

const imageCache = new NodeCache({ stdTTL: 3600 }); // 1小时缓存

async function cachedDownload(url, cacheDir) {
  // 检查内存缓存
  const cachedData = imageCache.get(url);
  if (cachedData) {
    return `从缓存获取：${url}`;
  }

  // 检查磁盘缓存
  const hash = require('crypto').createHash('md5').update(url).digest('hex');
  const cachePath = path.join(cacheDir, `${hash}.jpg`);
  
  try {
    fs.accessSync(cachePath);
    return `从磁盘缓存获取：${cachePath}`;
  } catch (e) {
    // 缓存不存在，执行下载
    const response = await axios({
      method: 'get',
      url: url,
      responseType: 'stream'
    });

    const writer = fs.createWriteStream(cachePath);
    response.data.pipe(writer);

    await new Promise((resolve, reject) => {
      writer.on('finish', () => {
        // 存入内存缓存
        const fileData = fs.readFileSync(cachePath);
        imageCache.set(url, fileData);
        resolve();
      });
      writer.on('error', reject);
    });

    return `下载并缓存至：${cachePath}`;
  }
}

// 使用示例
cachedDownload('https://example.com/unique.jpg', './image-cache')
  .then(console.log)
  .catch(console.error);

七、完整项目示例：图片下载服务

综合前述技术，构建一个可配置的图片下载服务：

// download-service.js
const axios = require('axios');
const fs = require('fs');
const path = require('path');
const pLimit = require('p-limit');
const cliProgress = require('cli-progress');

class ImageDownloader {
  constructor(options = {}) {
    this.concurrency = options.concurrency || 5;
    this.cacheDir = options.cacheDir || './.image-cache';
    this.retryCount = options.retryCount || 3;
    this.limit = pLimit(this.concurrency);
    
    // 确保缓存目录存在
    if (!fs.existsSync(this.cacheDir)) {
      fs.mkdirSync(this.cacheDir, { recursive: true });
    }
  }

  async download(url, outputPath) {
    const cachePath = this.getCachePath(url);
    
    // 优先从缓存读取
    try {
      if (fs.existsSync(cachePath)) {
        fs.copyFileSync(cachePath, outputPath);
        return `从缓存获取：${outputPath}`;
      }
    } catch (e) {
      console.warn('缓存读取失败，重新下载');
    }

    // 执行下载（带重试）
    return this.downloadWithRetry(url, outputPath, cachePath);
  }

  async downloadWithRetry(url, outputPath, cachePath, attempts = 0) {
    try {
      const response = await axios({
        method: 'get',
        url: url,
        responseType: 'stream'
      });

      const writer = fs.createWriteStream(outputPath);
      const tempWriter = fs.createWriteStream(cachePath);
      
      // 同时写入目标文件和缓存
      response.data.pipe(writer);
      response.data.pipe(tempWriter);

      await Promise.all([
        this.waitForStream(writer),
        this.waitForStream(tempWriter)
      ]);

      return `下载成功：${outputPath}`;
    } catch (error) {
      if (attempts >= this.retryCount) {
        throw new Error(`下载失败：${error.message}`);
      }
      
      const delay = 1000 * Math.pow(2, attempts);
      console.log(`重试 ${attempts + 1}/${this.retryCount}，等待 ${delay}ms...`);
      
      await new Promise(resolve => setTimeout(resolve, delay));
      return this.downloadWithRetry(url, outputPath, cachePath, attempts + 1);
    }
  }

  waitForStream(stream) {
    return new Promise((resolve, reject) => {
      stream.on('finish', resolve);
      stream.on('error', reject);
    });
  }

  getCachePath(url) {
    const hash = require('crypto').createHash('md5').update(url).digest('hex');
    return path.join(this.cacheDir, `${hash}.jpg`);
  }

  async batchDownload(urls, outputDir) {
    const tasks = urls.map(url => 
      this.limit(() => this.downloadSingle(url, outputDir))
    );
    
    return Promise.all(tasks);
  }

  async downloadSingle(url, outputDir) {
    const fileName = path.basename(url) || `image-${Date.now()}.jpg`;
    const outputPath = path.join(outputDir, fileName);
    return this.download(url, outputPath);
  }
}

// 使用示例
const downloader = new ImageDownloader({
  concurrency: 3,
  cacheDir: './image-cache',
  retryCount: 2
});

const urls = [
  'https://example.com/img1.jpg',
  'https://example.com/img2.jpg'
];

downloader.batchDownload(urls, './downloads')
  .then(results => console.log('批量下载完成：', results))
  .catch(console.error);

八、常见问题解决方案

1. 跨域问题

若下载第三方网站图片，需处理CORS限制。解决方案：

通过代理服务器中转请求
使用无头浏览器（如Puppeteer）获取完整页面后提取图片

// 使用Puppeteer下载页面中的所有图片
const puppeteer = require('puppeteer');

async function downloadImagesFromPage(url, outputDir) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  
  const imageUrls = await page.evaluate(() => {
    return Array.from(document.images).map(img => img.src);
  });

  // 使用前述下载方法处理imageUrls
  // ...
  
  await browser.close();
}

2. 大文件分块下载

对于GB级文件，需实现多线程分块下载：

// 简化版分块下载逻辑
async function downloadInChunks(url, outputPath, chunkSize = 5 * 1024 * 1024) {
  const { size } = await axios.head(url); // 获取文件总大小
  const totalChunks = Math.ceil(size / chunkSize);
  const writers = [];
  
  // 创建临时分块文件
  for (let i = 0; i  {
        response.data.pipe(writers[i]);
        return new Promise((resolve) => {
          writers[i].on('finish', resolve);
        });
      })
    );
  }

  await Promise.all(downloadPromises);
  
  // 合并分块（需实现合并逻辑）
  // ...
}

九、最佳实践总结

始终使用流式处理：避免大文件占用内存
实现断点续传：通过Range头请求部分内容
控制并发数：防止服务器拒绝过多请求
添加重试机制：网络请求具有不确定性
合理使用缓存：减少重复下载
提供进度反馈：提升用户体验

关键词：Node.js、图片下载、流式处理、Axios、并发控制、断点续传、缓存策略、错误处理、进度监控、Puppeteer

简介：本文详细介绍Node.js中实现图片下载的多种方案，涵盖基础HTTP请求、Axios高级用法、流式处理与进度监控、并发控制、错误重试机制、缓存优化等核心场景，提供完整的代码示例和最佳实践建议，适用于构建稳定的图片下载服务。

立即下载

JavaScript相关