vue项目中使用element-ui实现excel表格上传

Immortal
• 阅读 2354

恰逢项目中要实现excel表格上传,度娘甚久,得此一文,留之。 原文:https://blog.csdn.net/qq_36718999/article/details/95387542


需求

vue-cli 搭建前端项目,并使用element-ui实现本地excel表格上传。 (1) 限制上传文件只能是 xls、xlsx格式; (2) 限制上传文件大小不能超过 2MB!

图示

vue项目中使用element-ui实现excel表格上传

代码实现

  <el-form 
        ref="newUploadForm" 
        :model="newUploadForm" 
        :rules="formRules"
        label-width="140px" 
        label-position="right">
            <el-row class="mb-4">
                <el-col :span="24">
                    <el-form-item label="文件密码" prop="password" >
                        <el-input v-model="newUploadForm.password" clearable 
                        placeholder="文件密码(至少6位字母或数字)"  ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row >
                <el-col :span="19">
                    <el-form-item label="上传文件" prop="fileName">
                        <el-input v-model="fileName" 
                        :readonly='true'
                        placeholder="文件名"
                        style="width:510px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="doUpload"
                    :limit="1"
                    :file-list="fileList"
                    :before-upload="beforeUpload"
                    >
                    <el-button slot="trigger"  type="primary" plain>选取文件</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传excel文件,且不超过100MB</div>
                    <div slot="tip" class="el-upload-list__item-name">{{fileName}}</div> -->
                    </el-upload> 
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="btns-center mb-48 pt-48">
                        <el-button  @click="handleClose">取 消</el-button>
                        <el-button type="primary"   
                        @click="submitUpload()">确 定</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
  export default {
    data() {
        return {
            fileList:[],
            fileName:'', 
            newUploadForm:{
                password:'',
                fileName:''
            },
            formRules:{ // 表单 校验
                password:{required:true, trigger: 'blur',validator: validateFilePassword},
            },
        }
    },
    methods:{
        beforeUpload(file){ // 上传前 文件校验
            this.files = file;
            const extension = file.name.split('.')[1] === 'xls'
            const extension2 = file.name.split('.')[1] === 'xlsx'
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!extension && !extension2) {
              this.$message.warning('上传文件只能是 xls、xlsx格式!')
              return
            }
            if (!isLt2M) {
              this.$message.warning('上传文件大小不能超过 2MB!')
              return
            }
            this.fileName = file.name;
            return false // 返回false不会自动上传
      },
      submitUpload() { // 确认上传
        this.$refs['newUploadForm'].validate(valid => { // 是否通过 表单验证
            if(valid){
                if(this.fileName == ""){
                    this.$message({
                        message:'请选择要上传的文件!',
                        type:'warning',
                        showClose:true
                    })
                    return false;
                }

                let fileFormData = new FormData();
                fileFormData.append('file', this.files, this.fileName);  // 上传的文件
                fileFormData.append('period', this.newUploadForm.password); // 文件密码
                fileFormData.append('fileName', this.newUploadForm.fileName); // 文件名

                uploadEmployee(fileFormData).then(res => { // 上传请求
                    this.fileName = '';
                    // console.log(res)
                    if(res.code == 200){

                    }else{
                    }
                }).catch(err => {
                    this.fileName = '';
                    console.log('err')
                })
            }else{
                this.$message({
                    type:'warning',
                    message:'新增条件有误!',
                    showClose:true
                })
            }
        })
      },
      handleClose() {
          this.fileName = '';
      }
    }
}
  // 上传接口  
export function uploadEmployee(params) {
    return request({
      url: '/apis/upload/uploadEmployee',
      method: 'post',
      headers: {
        'Content-Type': 'multipart/form-data'
        },
      processData: false,
      data:params
    })
  }
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
C# Aspose.Cells导出xlsx格式Excel,打开文件报“Excel 已完成文件级验证和修复。此工作簿的某些部分可能已被修复或丢弃”
报错信息:最近打开下载的Excel,会报如下错误。(xls格式不受影响)!(https://oscimg.oschina.net/oscnet/2b6f0c8d7f97368d095d9f0c96bcb36d410.png)!(https://oscimg.oschina.net/oscnet/fe1a8000d00cec3c
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Immortal
Immortal
Lv1
人间留给他们吧,我只要那一轮明月就好...
文章
3
粉丝
2
获赞
2