前端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 文件数据，读取表格数据并进行业务处理。
需要注意的是，这里的代码只是示例，具体实现还需要考虑文件大小限制、文件类型限制、上传进度显示等问题，以及后端接口的数据解析错误、安全性等问题。