vue3 excel导入图片

excelToJsonWithImages 文档地址：

excelToJsonWithImages

<template>
  <div class="container">
    <input type="text" class="ct-input" :value="filePath" />
    <label class="ui-upload">浏览<input ref="file" type="file" style="display: none" @change="handleChange" /></label>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { excelToJsonWithImages } from 'xlsx-to-json-img';

const filePath = ref('');
const file = ref();
/**
 * 上传前处理
 */
const handleChange = async (e) => {
  const file = e.target.files[0];
  const options = {
    测试: {
      columns: [
        {
          name: '序号',
          field: 'index',
          isImage: false,
        },
        {
          name: '联系人',
          field: 'contactPerson',
          isImage: false,
        },
        {
          name: '联系电话',
          field: 'phone',
          isImage: false,
        },
        {
          name: '车牌号',
          field: 'plateNum',
          isImage: false,
        },
        {
          name: '车牌颜色',
          field: 'color',
          isImage: false,
        },
        {
          name: '图片1',
          field: 'image1',
          isImage: true,
        },
        {
          name: '图片2',
          field: 'image2',
          isImage: true,
        },
        {
          name: '图片3',
          field: 'image3',
          isImage: true,
        },
      ],
      headerIndex: 1,
    },
    Sheet2: {
      columns: [
        {
          name: '序号',
          field: 'index',
          isImage: false,
        },
        {
          name: '姓名',
          field: 'name',
          isImage: false,
        },
        {
          name: '地址',
          field: 'address',
          isImage: false,
        },
        {
          name: '图片',
          field: 'image',
          isImage: true,
        },
        {
          name: '照片',
          field: 'image2',
          isImage: true,
        },
      ],
      headerIndex: 0,
    },
  };
  const result = await excelToJsonWithImages(file, options);
  console.log('result', result);
  // result 输出结果
};
</script>

<style scoped></style>