el-upload 上传excel文件,后端使用spring boot接收并获取到excel文件的每一个参数
时间: 2024-09-18 09:13:30 浏览: 46
vue使用el-upload上传文件及Feign服务间传递文件的方法
要实现在`el-upload`中上传Excel文件至Spring Boot后端并解析每个单元格的数据,你可以按照以下步骤操作:
1. 使用`el-upload`组件配置文件上传,允许多选文件(包括Excel)[^1]:
```html
<template>
<el-form :model="uploadForm" ref="uploadForm">
<el-upload
:action="/api/upload-excel"
:multiple="true"
:auto-upload="false" <!-- 阻止自动上传 -->
:on-change="handleChange"
accept=".xlsx,.xls"
>
<i class="el-icon-upload"></i> 导入 Excel
</el-upload>
...
</el-form>
</template>
<script>
export default {
data() {
return {
uploadForm: {
fileList: []
},
//...
};
},
methods: {
handleChange(fileList) {
this.uploadForm.fileList = fileList;
}
// 添加一个form表单提交方法,如点击按钮时触发
handleSave() {
if (this.uploadForm.fileList.length > 0) {
const formData = new FormData();
for (let i = 0; i < this.uploadForm.fileList.length; i++) {
formData.append('file', this.uploadForm.fileList[i]);
}
axios.post('/api/upload-excel', formData, {
headers: {'Content-Type': 'multipart/form-data'}
})
.then(response => {
// 处理后端返回的数据
response.data.forEach(excelData => {
// 解析excel数据,这通常需要借助第三方库如js-xlsx或sheetjs
// 这里省略具体解析代码
});
})
.catch(error => console.error(error));
} else {
alert('请选择至少一个文件');
}
}
}
};
</script>
```
2. 后端Spring Boot接收文件:
在Spring Boot应用中,创建一个REST控制器来接收文件。例如,可以创建一个名为`FileController`的类,添加一个POST请求处理方法,接受`MultipartFile[] files`参数[^2]:
```java
@PostMapping("/upload-excel")
public ResponseEntity<?> handleExcelUpload(@RequestParam("files") MultipartFile[] files) throws IOException {
List<Map<String, String>> excelData = new ArrayList<>();
for (MultipartFile file : files) {
try (InputStream inputStream = file.getInputStream()) {
// 使用如Apache POI或jxl解析Excel
// Map<String, String> rowData = parseExcelRow(inputStream);
// excelData.add(rowData);
}
}
// 返回处理后的数据
return ResponseEntity.ok(excelData);
}
```
请注意,`parseExcelRow()`方法需根据实际使用的解析库来编写。
阅读全文