Vue中导入excel文件的两种方式及使用步骤
短信预约 -IT技能 免费直播动态提醒
导入excel文件
前言
两种导入文件的方法：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文件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
