vue2多个文件上传后再解析的小组件

需求：上传3~4个文件后，解析文件信息，返回结果。

添加了一个计算属性isReadyToParse来检查四个文件是否都已上传。将四个文件的解析函数分为两个函数：parseFile和calculateFileResult。parseFile函数使用Promise对象来处理异步文件读取和Excel文件解析，并返回一个包含结果的Promise对象。calculateFileResult函数执行计算并将结果转换为一个包含对象的数组。将四个文件的解析函数的调用合并为一个Promise.all调用，并将结果传递给calculateResult函数进行处理。最终结果将在控制台上显示。

<template>
  <div>
    <input type="file" @change="importFile1">
    <input type="file" @change="importFile2">
    <input type="file" @change="importFile3">
    <input type="file" @change="importFile4">
    <button :disabled="!isReadyToParse" @click="parseFiles">Parse Files</button>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  name: 'ExcelParser',
  props: {
    result: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      file1: null,
      file2: null,
      file3: null,
      file4: null
    };
  },
  computed: {
    isReadyToParse() {
      return this.file1 && this.file2 && this.file3;
    }
  },
  methods: {
    importFile1(event) {
      this.file1 = event.target.files[0];
    },
    importFile2(event) {
      this.file2 = event.target.files[0];
    },
    importFile3(event) {
      this.file3 = event.target.files[0];
    },
    importFile4(event) {
      this.file4 = event.target.files[0];
    },
    parseFiles() {
      const promises = [];
      promises.push(this.parseFile(this.file1));
      promises.push(this.parseFile(this.file2));
      promises.push(this.parseFile(this.file3));
      if (this.file4) {
        promises.push(this.parseFile(this.file4));
      }
      Promise.all(promises)
        .then((results) => {
          const result = this.calculateResult(results[0], results[1], results[2], results[3]);
          this.$emit('parsed', result);
        })
        .catch((error) => {
          console.error(error);
        });
    },
    parseFile(file) {
      return new Promise((resolve, reject) => {
        if (!file) {
          resolve([]);
        }
        const reader = new FileReader();
        reader.onload = (event) => {
          const data = XLSX.read(event.target.result, { type: 'binary' });
          const sheet = data.Sheets[data.SheetNames[0]];
          const rows = XLSX.utils.sheet_to_json(sheet, { header: 1 });
          // Process rows data
          const result = this.calculateFileResult(rows);
          resolve(result);
        };
        reader.onerror = (event) => {
          reject(event.message);
        };
        reader.readAsBinaryString(file);
      });
    },
    calculateFileResult(rows) {
      // Perform calculations and return results as an array of objects
      return rows.map((row) => ({
        column1: row[0],
        column2: row[1],
        column3: row[2]
      }));
    },
    calculateResult(result1, result2, result3, result4) {
      // Perform calculations and return results as an array of objects
      return result1.concat(result2, result3, result4);
    }
  }
};
</script>

在父组件中，使用以下方法监听parsed事件并获取计算结果：

 

<template>
  <div>
    <ExcelParser @parsed="onParsed"></ExcelParser>
    <ul>
      <li v-for="item in result" :key="item.id">{{ item.column1 }}, {{ item.column2 }}, {{ item.column3 }}</li>
    </ul>
  </div>
</template>

<script>
import ExcelParser from './ExcelParser.vue';

export default {
  components: {
    ExcelParser
  },
  data() {
    return {
      result: []
    };
  },
  methods: {
    onParsed(result) {
      this.result = result;
    }
  }
};
</script>