如何从含image和name列的Excel提取图片转ByteArray并生成JSON？

依赖准备 #

首先安装处理Excel和Zip文件的依赖：

npm install xlsx jszip
# 或使用yarn
yarn add xlsx jszip

完整解析函数实现 #

结合你已有的上传表单，以下是处理文件解析的核心函数：

import XLSX from 'xlsx';
import JSZip from 'jszip';

const handleFormSubmit = async (type, e) => {
  if (type !== 'file') return;
  const file = e.target.files[0];
  if (!file) return;

  try {
    // 读取上传文件为ArrayBuffer
    const arrayBuffer = await file.arrayBuffer();
    
    // 解析Excel工作簿与工作表
    const workbook = XLSX.read(arrayBuffer, { type: 'array' });
    const sheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[sheetName];
    
    // 将工作表数据转换为JSON格式
    const rawRows = XLSX.utils.sheet_to_json(worksheet);
    
    // 解析Excel的Zip结构，提取嵌入式图片
    const zip = await JSZip.loadAsync(arrayBuffer);
    const mediaStore = {};
    const mediaFolder = zip.folder('xl/media');

    if (mediaFolder) {
      // 批量读取所有图片文件为Uint8Array（即ByteArray）
      await Promise.all(
        Object.keys(mediaFolder.files).map(async (fileName) => {
          mediaStore[fileName] = await mediaFolder.file(fileName).async('uint8array');
        })
      );
    }
    
    // 匹配每行数据与对应图片，生成目标格式JSON数组
    const parsedData = rawRows.map((row, index) => {
      // 按图片在Excel中的存储顺序匹配行数据，若需精准关联单元格需额外处理位置信息
      const imageKeys = Object.keys(mediaStore);
      return {
        image: imageKeys[index] ? mediaStore[imageKeys[index]] : null,
        name: row.name || ''
      };
    });

    // 此处可根据需求处理解析结果（如上传后端、本地存储等）
    console.log('解析完成:', parsedData);
  } catch (err) {
    console.error('Excel解析失败:', err);
  }
};

关键说明 #

• 图片匹配逻辑：默认按图片在Excel中的存储顺序与行数据一一对应。若需要图片与指定单元格精准绑定，可通过worksheet['!images']获取图片的位置坐标，再匹配对应行的单元格信息。
• 格式支持：优先处理.xlsx格式文件，旧版.xls对嵌入式图片的解析支持有限。
• ByteArray对应类型：JS中的Uint8Array即为需求中的ByteArray，可直接用于后续数据传输或存储。

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