Vue导入excel文件的两种方式(form表单和el-upload)
作者：小谷69
最近开发遇到一个点击导入按钮让excel文件数据导入的需求,下面这篇文章主要给大家介绍了关于Vue导入excel文件的两种方式,分别是form表单和el-upload两种方法,需要的朋友可以参考下
前言
两种导入文件的方法：form表单和el-upload
第一种方法：form表单
一、文件上传的三要素是什么？
文件上传的三要素：
- 表单post请求
- input框的type=file
- 在form表单中添加enctype=“multipart/form-data”
二、具体使用步骤
代码如下（示例）：
<form action="/" method="post" enctype="multipart/form-data">
<input name="photo" type="file" />
</form>
注意：
- input框中的type属性等于file
- form表单必须是post请求
- form表单必须添加enctype=“multipart/form-data”
- 在后端使用MultipartFile 类型 参数名必须和前端中的input中的name属性值一致。
第二种方法：el-upload
导入的表格传给后台form-data形式
api.js：
export function SetPDFile(formFile) {
return request({
url: "/Economic/SetPDFile",
method: 'post',
data: formFile,
})
}
vue：
<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 => {
// console.log(res)
if (res.Status && res.Data) {
this.$message.success("导入成功");
this.getList(); // 导入表格之后可以获取导入的数据渲染到页面，此处的方法是获取导入的数据
} else {
this.$message.error(res.Message)
}
}).catch(err => {
that.$message({
type: 'error',
message: '导入失败'
})
})
},
}
}
</script>
总结
到此这篇关于Vue导入excel文件的两种方式的文章就介绍到这了,更多相关Vue导入excel文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！