elemetUi 组件--el-upload实现上传Excel文件的实例
时间:2019-04-07
本文章向大家介绍elemetUi 组件--el-upload实现上传Excel文件的实例,主要包括elemetUi 组件--el-upload实现上传Excel文件的实例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
elemetUi 组件--el-upload实现上传Excel文件的实例
【需求】实现上传Excel文件,在上传到服务器时,还要附加一个参数,在请求上传文件接口前,先要进行文件格式判断。
【知识点】
1、el-upload 官方文档中,主要用到了以下属性:
data | 可选参数, 上传时附带的额外参数 |
name | 可选参数, 上传的文件字段名 |
before-upload | 可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。 |
2、split进行字符串截取
【分析】
<template> <div class="panel admin-panel"> <div class="panel-head" id="add"><strong><span class="el-icon-edit"></span><span class="title">上传数据</span></strong></div> <div 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> <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div> </el-upload> </el-form-item> </el-form> </div> </div> </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>
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 重温C++的设计思想
- 设计一个网站(域名)的镜像
- LoRa终端设备ASR6505普通GPIO操作
- LoRa终端设备ASR6505之I2C通信
- 我在暴躁同事小张的胁迫下学会了Go的交叉编译和条件编译
- LoRa终端设备ASR6505之PingPong通信
- LoRa点对点通信,OLED显示(内附代码)
- 08 . Python3高阶函数之迭代器、装饰器
- redis源码之SDS
- 01 . Tomcat简介及多实例部署
- 学练结合,快速掌握Kubernetes Service
- arraylist linkedlist vector
- Java的HashMap和HashTable
- 花木兰到底好看不,我用Python爬取了几万条评论!
- java方法重载