使用Ant design vue实现Excel的上传及读取
1、使用组件 Ant design vue自带上传文件组件,accept限制上传的文件类型其中action是上传的地址,但是使用action的话,会没有token,项目中出现验证的话就会不可用,这里使用customRequest,它的作用是覆盖默认的上传行为,自定义上传这里为什么用FormData而不是直接使用info.file,是因为info.file是字符串而不是文件类型,为什么这么用,我也不
·
1、使用组件
Ant design vue自带上传文件组件,accept限制上传的文件类型
<a-upload
v-model:file-list="keyList"
name="file"
accept=".xlsx,.xls"
:headers="headers"
@change="handleKeyChange"
:customRequest="fileUpload"
>
<a-button>
<upload-outlined></upload-outlined>
上传
</a-button>
</a-upload>
其中action是上传的地址,但是使用action的话,会没有token,项目中出现验证的话就会不可用,这里使用customRequest,它的作用是覆盖默认的上传行为,自定义上传
const fileUpload = function(info){
console.log(info)
const formData = new FormData()
formData.append('file', info.file)
formData.append('token', 'aiufpaidfupipiu')//随便写一个token示例
http.request({
url: "/RedisSyncPlugin/parseExcel",
method: "post",
data: formData
}).then((res) => {
if(res.success){
info.onSuccess() // 结束上传
res.data.forEach((item,index) => {
innerValue.value.push({
srcKey: item[0],
destKey: item[1],
id: Date.now() + index,
});
});
}else{
info.onError() // 结束上传
}
})
}
这里为什么用FormData而不是直接使用info.file,是因为info.file是字符串而不是文件类型,为什么这么用,我也不太清楚,能用就行
出现这样的类型,代表传给后台的是文件
2、后台实现
pom引用
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>5.2.3</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>5.2.3</version>
</dependency>
实现
@ApiOperation(value = "解析excel", notes = "解析excel数据并返回到前端")
@PostMapping("/parseExcel")
public JsonResult<?> parseExcel(@RequestParam("file") MultipartFile file) {
try (InputStream is = new ByteArrayInputStream(file.getBytes())) {
FileMagic fm = FileMagic.valueOf(is);
Workbook wb;
if (fm == FileMagic.OOXML) {
wb = new XSSFWorkbook(is);
} else {
wb = new HSSFWorkbook(is);
}
int activeSheetIdx = wb.getActiveSheetIndex();
Sheet sheet = wb.getSheetAt(activeSheetIdx);
if (null == sheet) {
sheet = wb.getSheetAt(0);
}
List<List<String>> sheetValues = new ArrayList<>();
for (Row row : sheet) {
List<String> rowValues = new ArrayList<>();
for (Cell cell : row) {
String val = cell.getStringCellValue();
rowValues.add(val);
}
sheetValues.add(rowValues);
}
wb.close();
JsonResult<List<List<String>>> result = new JsonResult<>();
result.setSuccess(true);
result.setData(sheetValues);
return result;
} catch (Exception e) {
return JsonResult.ERROR(e.getMessage());
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)