批量数据通过前端上传Excel录入

2023-12-06 09:30:12

将大量文件数据通过el-upload上传到数据库中

1. 安装el-upload组件

npm install element-ui

2. 在项目中导入el-upload组件

import { ElUpload } from 'element-ui'

3. 在你的Vue组件中注册el-upload组件

components: {
  ElUpload
}

4. 在你的Vue组件中使用el-upload组件

<el-upload
  action="/api/upload"
  list-type="picture-card"
  :on-success="handleSuccess"
  :before-upload="beforeUpload"
>
  <i class="el-icon-upload"></i>
  <div slot="tip" class="el-upload__tip">点击或将文件拖拽到这里进行上传</div>
</el-upload>

5. 在你的Vue组件中处理上传的文件

methods: {
  handleSuccess(response) {
    console.log(response)
  },
  beforeUpload(file) {
    const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    if (!isExcel) {
      this.$message.error('只能上传Excel文件')
      return false
    }
    return true
  }
}

6. 将数据插入到数据库中

async function insertData(data) {
  const sql = 'INSERT INTO table_name (column1, column2, column3) VALUES (?, ?, ?)'
  for (const row of data) {
    await connection.query(sql, row)
  }
}