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>

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2017-10-26

PHP上传Excel文件导入数据到MySQL数据库示例

最近在做Excel文件导入数据到数据库.网站如果想支持批量插入数据,可以制作一个上传Excel文件,导入里面的数据内容到MySQL数据库的小程序. 要用到的工具: ThinkPHP:轻量级国产PHP开发框架.可在ThinkPHP官网下载. PHPExcel:Office Excel 文档的一个PHP类库,它基于微软的OpenXML标准和PHP语言.可在CodePlex官网下载.. 1.设计MySQL数据库product 创建product数据库 CREATE DATABASE product D

使用smartupload组件实现jsp+jdbc上传下载文件实例解析

SmartUpload组件只有5个分别是:File.Files.Request.SmartUpload.SmartUploadException类,其中,File代表用户上传的文件,Files代表用户上传的多个文件,Request相当于HttpServletRequest的功能,用于获取表单数据,SmartUpload是最核心的类,负责文件上传下载,SmartUploadException是自定义异常.    SmartUpload的基本使用思路如下: jsp前台代码表单提交 <form act

asp.net上传Excel文件并读取数据的实现方法

前言 本文主要给大家介绍了关于asp.net上传Excel文件并读取数据的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 实现如下: 前台代码:使用服务端控件实现上传 <form id="form1" runat="server"> <div> <asp:FileUpload ID="ExcelFileUpload" runat="server" /> <as

yii2.0框架实现上传excel文件后导入到数据库的方法示例

本文实例讲述了yii2.0框架实现上传excel文件后导入到数据库的方法.分享给大家供大家参考,具体如下: Model模型 <?php /** * 描述... * @author zcy * @date 2019/8/13 */ namespace app\models; use yii\base\Model; use yii\db\ActiveRecord; use yii\web\UploadedFile; class uploadForm extends ActiveRecord { pu

koa上传excel文件并解析的实现方法

1.中间键使用 koa-body npm install koa-body --save const koaBody = require('koa-body'); app.use(koaBody({ multipart: true, formidable: { maxFileSize: 200 * 1024 * 1024 // 设置上传文件大小最大限制,默认2M } })); 2.书写路由,croller书写方法 uploadData.js const errorResult = require

angularjs中$http异步上传Excel文件方法

1.文件上传框html代码如下 <form id="fileForm" enctype="multipart/form-data"> <button id="import_asset" type="button" ng-click="import_asset()">上传文件</button> <input id="file_asset" type

ASP.NET实现上传Excel功能

这几天正好用到上传Excel,并根据Excel中的数据做相应的处理,故整理以备用. 用到的资源: (1)NOPI 2.2.0.0 可自己官网下载,也可点击:http://pan.baidu.com/s/1b1EMdg (2)用到一些常见处理文件的公共方法类,可以添加到项目中:http://pan.baidu.com/s/1bJpHuQ 如过上述连接因故无法使用,可在评论留下邮箱,我打包发送过去,如有更好的建议,欢迎指导. 后台的提示方法ShowMsgHelper,根据自己的改写即可. 前台代码:

php上传excel表格并获取数据

这个是最近需要做的一个功能,在网上也查看了很多相关的文章,基本上大同小异,在这里整理一下. 一:首先是html部分 <html> <body> <form action="upload_file.php" method="post" enctype="multipart/form-data"> <input type="file" name="file" id=&q

JSP上传excel及excel插入至数据库的方法

本文实例讲述了JSP上传excel及excel插入至数据库的方法.分享给大家供大家参考.具体如下: 此导入excel是与pojo绑定的,(缺点)excle表头必须是pojo的字段值 1. html页面: <form id="myform" method="post" enctype="multipart/form-data"> <table> <tr> <td></td> <td&