vue 实现批量导入

2026-02-20 02:54:10VUE

批量导入功能实现方法

在Vue中实现批量导入通常涉及文件上传、数据解析和后端交互。以下是常见的实现步骤和代码示例：

前端文件上传组件

使用<input type="file">结合Vue处理文件选择：

vue 实现批量导入

<template>
  <div>
    <input type="file" @change="handleFileChange" accept=".xlsx, .csv" multiple>
    <button @click="uploadFiles">批量导入</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleFileChange(event) {
      this.selectedFiles = Array.from(event.target.files)
    },
    uploadFiles() {
      if (!this.selectedFiles.length) return

      const formData = new FormData()
      this.selectedFiles.forEach(file => {
        formData.append('files', file)
      })

      axios.post('/api/import', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('导入成功', response.data)
      })
    }
  }
}
</script>

文件解析处理

对于Excel文件解析，可以使用xlsx库：

import * as XLSX from 'xlsx'

parseExcel(file) {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result)
      const workbook = XLSX.read(data, { type: 'array' })
      const firstSheet = workbook.Sheets[workbook.SheetNames[0]]
      const jsonData = XLSX.utils.sheet_to_json(firstSheet)
      resolve(jsonData)
    }
    reader.readAsArrayBuffer(file)
  })
}

分块上传处理

大数据量时可分块上传：

vue 实现批量导入

async chunkedUpload(files) {
  const CHUNK_SIZE = 1024 * 1024 // 1MB
  for (const file of files) {
    let offset = 0
    while (offset < file.size) {
      const chunk = file.slice(offset, offset + CHUNK_SIZE)
      await this.uploadChunk(chunk, file.name, offset)
      offset += CHUNK_SIZE
    }
  }
}

后端接口配合

Node.js示例处理多文件上传：

const multer = require('multer')
const upload = multer({ dest: 'uploads/' })

app.post('/api/import', upload.array('files'), (req, res) => {
  const files = req.files
  // 处理每个文件
  files.forEach(file => {
    // 解析文件内容并入库
  })
  res.send({ success: true })
})

进度反馈实现

添加上传进度监控：

axios.post('/api/import', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: progressEvent => {
    const percent = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    this.uploadProgress = percent
  }
})