vue2 导入excel 带图片

在Vue2中导入带有图片的Excel文件，可以按照以下步骤进行操作：

1. 首先安装相关依赖，可以使用`xlsx`和`file-saver`库。可以通过命令`npm install xlsx file-saver --save`来安装。

2. 在需要导入Excel文件的组件中，导入相关依赖和定义一个导入Excel的方法。例如：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';

export default {
  methods: {
    importExcel(event) {
      const file = event.target.files[0];  // 获取选择的Excel文件
      const reader = new FileReader();

      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 遍历每个sheet
        workbook.SheetNames.forEach((sheetName) => {
          const worksheet = workbook.Sheets[sheetName];
          const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

          // 处理Excel数据
          jsonData.forEach((row) => {
            // 获取图片数据
            const image = row[1];  // 假设图片列是第二列

            // 处理图片

          });
        });
      };

      reader.readAsArrayBuffer(file);
    }
  }
};

3. 在模板中添加一个文件选择器和一个绑定事件的按钮。例如：

<template>
  <div>
    <input type="file" accept=".xlsx" @change="importExcel">
    <button @click="importExcel">导入Excel</button>
  </div>
</template>

4. 在`importExcel`方法中，获取选择的Excel文件，并使用`FileReader`读取文件内容。然后使用`XLSX`库将文件内容转换为`Workbook`对象。

5. 使用`Workbook`对象遍历每个sheet，并将每个sheet转换为JSON格式数据。

6. 遍历每行数据，获取图片列的数据。然后可以使用JavaScript的图片处理库，如`canvas`或`FileReader`，来处理图片数据。

请注意，这只是一个示例代码，具体的处理图片数据的方式可能因为具体的业务需求而有所不同。