目录前言第一种方法:fORM表单一、文件上传的三要素是什么?二、具体使用步骤第二种方法:el-upload总结前言 两种导入文件的方法:form表单和el-upload 第一种方法:
两种导入文件的方法:form表单和el-upload
文件上传的三要素:
代码如下(示例):
<form action="/" method="post" enctype="multipart/form-data">
<input name="photo" type="file" />
</form>
注意:
导入的表格传给后台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文件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue导入excel文件的两种方式(form表单和el-upload)
本文链接: https://www.lsjlt.com/news/172971.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0