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 相关文章推荐
动态加载iframe
Jun 16 Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 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下载文件名中解决乱码的问题
2013/06/20 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
js时间控件只显示年月
2017/01/08 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
2015年度企业工作总结
2015/05/21 职场文书
同事去世追悼词
2015/06/23 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
Django框架中模型的用法
2022/06/10 Python
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python