这次给大家带来el-upload怎样上传excel文件，el-upload上传excel文件的注意事项有哪些，下面就是实战案例，一起来看一下。
el-upload怎样上传excel文件
elemetui 组件--el-upload实现上传excel文件的实例
【需求】实现上传excel文件，在上传到服务器时，还要附加一个参数，在请求上传文件接口前，先要进行文件格式判断。
【知识点】
1、el-upload 官方文档中，主要用到了以下属性：
data
可选参数, 上传时附带的额外参数
name
可选参数, 上传的文件字段名
before-upload
可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 promise 且被 reject，则停止上传。
2、split进行字符串截取
【分析】
<template>
<p class="panel admin-panel">
<p class="panel-head" id="add"><strong><span class="el-icon-edit"></span><span class="title">上传数据</span></strong></p>
<p class="body-content">
<el-form :model="ruleform" ref="ruleform" label-width="100px" class="form uploadform">
<el-form-item label="部门" prop="name">
<el-select v-model="form.type" placeholder="请选择" style="width: 135px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-upload
class="upload-demo"
ref="upload"
action="http://10.1.20.218:8088/gnh-webadmin-platfrom/api/v1/sendsalarybillgeinihua"
:on-preview="handlepreview"
:before-upload="beforeavatarupload"
:on-remove="handleremove"
:file-list="filelist"
:auto-upload = 'false'
:on-success = 'handlesuccess'
:data="form"
name="salarybill">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitupload">上传到服务器</el-button>
<p slot="tip" class="el-uploadtip">只能上传xls/xlsx文件</p>
</el-upload>
</el-form-item>
</el-form>
</p>
</p>
</template>
<script>
export default {
data() {
return {
options: [{
value: '1',
label: '帅哥部'
}, {
value: '2',
label: '美女部'
}],
filename:'',
filelist:[],
ruleform: {
// name: '',
isshow: '0'
},
form:{
type:'1'
},
};
},
methods: {
submitupload() {
this.$refs.upload.submit();
},
beforeavatarupload(file) {
let xls = file.name.split('.');
if(xls[1] === 'xls'||xls[1] === 'xlsx'){
return file
}else {
this.$message.error('上传文件只能是 xls/xlsx 格式!')
return false
}
},
handleremove(file, filelist) {
},
handlepreview(file) {
},
handlesuccess(res,file,filelist){
if(res.code===20000){
this.$message({
message: '上传成功！',
type: 'success'
});
}else {
this.$message({
message: res.msg,
type: 'error'
});
}
}
}
}
</script>
<style scope>
input[type=file] {
display: none;
}
.el-upload-list{
width: 200px;
}
.el-select {
width: 135px;
}
</style>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
以上就是el-upload怎样上传excel文件的详细内容。