elemetUi 组件--el-upload实现上传Excel文件的实例


Posted in Javascript onOctober 27, 2017

elemetUi 组件--el-upload实现上传Excel文件的实例

【需求】实现上传Excel文件,在上传到服务器时,还要附加一个参数,在请求上传文件接口前,先要进行文件格式判断。

elemetUi 组件--el-upload实现上传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 学习之旅 (1)
Feb 05 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
puppeteer库入门初探
Jan 09 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 #Javascript
vue中v-model动态生成的实例详解
Oct 27 #Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 #Javascript
js通过Date对象实现倒计时动画效果
Oct 27 #Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 #Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 #Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 #Javascript
You might like
PHP获取MAC地址的函数代码
2011/09/11 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
package.json文件配置详解
2017/06/15 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
python中map()与zip()操作方法
2016/02/27 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Pycharm调试程序技巧小结
2020/08/08 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
英文版网络工程师求职信
2013/10/28 职场文书
元宵节主持词
2014/03/25 职场文书
安全责任书怎么写
2014/07/28 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
Redis+AOP+自定义注解实现限流
2022/06/28 Redis