前端vue3通过接口导入xlsx文件 附实现案列代码

以下是一个基于 Vue 3 的前端通过接口导入 xlsx 文件的示例代码：

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".xlsx">
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async handleFileUpload(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        console.log(response.data);
      } catch (error) {
        console.log(error);
      }
    }
  }
}
</script>

在上面的示例中，我们首先在模板中添加了一个文件上传的 input 标签，并设置了 accept 属性为 .xlsx 文件类型。然后我们监听了 input 标签的 change 事件，在用户选择文件后获取文件对象，利用 FormData 对象将文件数据转换为表单数据，并通过 axios 发送 POST 请求到后端接口 `/api/upload`。注意，请求头需要设置 `Content-Type` 为 `multipart/form-data`，以便后端能够识别表单数据。

在后端接口中，我们可以使用如下代码来解析表单数据：

const express = require('express');
const xlsx = require('xlsx');
const app = express();

app.post('/api/upload', (req, res) => {
  const file = req.files.file;
  const workbook = xlsx.read(file.data, { type: 'buffer' });
  // 解析表格数据，进行业务处理
});

在上面的代码中，我们使用了 `xlsx` 库来解析 xlsx 文件数据，读取表格数据并进行业务处理。

需要注意的是，这里的代码只是示例，具体实现还需要考虑文件大小限制、文件类型限制、上传进度显示等问题，以及后端接口的数据解析错误、安全性等问题。