React中解码Base64字符串并批量按序下载图片的实现

问题分析 #

你原来的代码存在几个核心问题：

1. 错误将API返回的Base64数组按Blob处理，实际API返回的是包含Base64字符串的JSON数组
2. 仅处理单文件下载，未实现批量按序下载
3. 未处理Base64字符串中的冗余格式（如示例中的b'...'前缀）

正确实现代码 #

import React from "react";
import axios from "axios";

export default function App() {
  // 替换为你的实际API地址
  const baseUrl = "your-api-base-url";

  // 清理Base64字符串，移除不必要的前缀和包裹
  const cleanBase64 = (base64Str) => {
    return base64Str.replace(/^data:image\/\w+;base64,/, "")
                    .replace(/^b'|'$/g, "");
  };

  // 将Base64转换为Blob
  const base64ToBlob = (base64Str, mimeType = "image/jpeg") => {
    const byteCharacters = atob(cleanBase64(base64Str));
    const byteArrays = [];
    for (let i = 0; i < byteCharacters.length; i++) {
      byteArrays.push(byteCharacters.charCodeAt(i));
    }
    return new Blob([new Uint8Array(byteArrays)], { type: mimeType });
  };

  const handleDownload = async () => {
    try {
      // 请求获取Base64图片数组
      const response = await axios.get(`${baseUrl}/bulk/images/download`);
      const imageBase64List = response.data;

      // 遍历数组批量下载，按序命名
      imageBase64List.forEach((base64, index) => {
        // 创建Blob对象
        const blob = base64ToBlob(base64);
        const url = window.URL.createObjectURL(blob);
        
        // 创建下载链接
        const link = document.createElement("a");
        link.href = url;
        // 按序命名，如image-1.jpg、image-2.jpg
        link.download = `image-${index + 1}.jpg`;
        link.style.display = "none";
        
        document.body.appendChild(link);
        link.click();
        
        // 清理资源
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      });
    } catch (error) {
      console.error("下载失败:", error);
    }
  };

  return (
    <div className="App">
      <h1>批量下载图片</h1>
      <button type="button" onClick={handleDownload}>
        开始下载
      </button>
    </div>
  );
}

关键说明 #

• Base64清理：处理API返回的Base64字符串中可能存在的data:image/xxx;base64,前缀或b'...'包裹格式
• 批量处理：遍历数组，为每个图片生成独立的下载链接，按序号命名确保顺序
• 资源清理：下载完成后移除DOM元素并释放ObjectURL，避免内存泄漏
• 错误处理：使用try/catch捕获请求和下载过程中的异常

内容的提问来源于stack exchange，提问作者Tony