vue3做批量导入实现代码

以下是一个基于Vue3的批量导入实现代码的示例：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <button @click="importData">导入</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const dataArray = ref([])

    const handleFileChange = (event) => {
      const file = event.target.files[0]

      if (!file) return

      const reader = new FileReader()

      reader.onload = (e) => {
        const data = e.target.result
        const lines = data.split(/\r\n|\n/)

        const headers = lines[0].split(',')
        const rows = []

        for (let i = 1; i < lines.length; i++) {
          const values = lines[i].split(',')
          const row = {}

          for (let j = 0; j < headers.length; j++) {
            row[headers[j]] = values[j]
          }

          rows.push(row)
        }

        dataArray.value = rows
      }

      reader.readAsText(file)
    }

    const importData = () => {
      // 进行数据导入操作
      console.log(dataArray.value)
    }

    return {
      dataArray,
      handleFileChange,
      importData
    }
  }
}
</script>

在上面的代码中，我们通过ref创建了一个响应式的dataArray数组，用于存储导入的数据。当用户选择文件后，我们通过FileReader将文件内容读取为文本，并将文本解析为行和列形式的数据，然后将其存储在dataArray中。最后，用户点击“导入”按钮时，可以将dataArray传递给后端进行进一步处理