vue中导入excel文件
时间: 2023-09-27 22:07:41 浏览: 117
在Vue中导入Excel文件的代码如下所示:
<template>
<div>
<el-upload class="upload" action="#" :show-file-list="false" :on-change="handleExcel" accept="'.xlsx','.xls'" :auto-upload="false" :headers="headers">
<el-button size="mini" type="primary">导入</el-button>
</el-upload>
</div>
</template>
<script>
import { SetPDFile } from "@/api";
export default {
data() {
return {
headers: {
"Content-Type": "multipart/form-data;charset=UTF-8"
}
};
},
methods: {
// 导入表格
handleExcel(file) {
let formData = new FormData(); // 声明一个FormDate对象
formData.append("formFile", file.raw); // 把文件信息放入对象中
// 调用后台导入的接口
SetPDFile(formData)
.then(res => {
if (res.Status && res.Data) {
this.$message.success("导入成功");
this.getList(); // 导入表格之后可以获取导入的数据渲染到页面,此处的方法是获取导入的数据
} else {
this.$message.error(res.Message);
}
})
.catch(err => {
this.$message({
type: "error",
message: "导入失败"
});
});
}
}
};
</script>
在上述代码中,我们使用了el-upload
组件来实现文件上传功能。通过设置accept
属性来限制只能上传.xlsx
和.xls
格式的文件。在handleExcel
方法中,我们使用FormData
对象来构建表单数据,并将文件信息放入其中。然后调用后台的导入接口SetPDFile
来处理上传的文件。如果导入成功,我们会显示成功的提示信息,并调用getList
方法来获取导入的数据并渲染到页面上。如果导入失败,我们会显示失败的提示信息。
引用[.reference_title]
- 1 3 Vue中导入excel文件的两种方式[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2
allinsert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - 2 Vue实现导入Excel功能[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2
allinsert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]