【需求】实现上传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>

elemetUi 组件--el-upload的更多相关文章

  1. vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]

    今天无聊地写vuecli3听歌的时候,遇到了上传文件到Django的自我需求,然后就到vuetify的表单组件里找upload btn,发现居然没有!!! 顿时惊了个呆,要知道之前用element做操 ...

  2. elemetUi 组件--el-checkbox

    [需求]实现选择右边的

  3. element-ui Upload 上传组件源码分析整理笔记(十四)

    简单写了部分注释,upload-dragger.vue(拖拽上传时显示此组件).upload-list.vue(已上传文件列表)源码暂未添加多少注释,等有空再补充,先记下来... index.vue ...

  4. 使用element的upload组件实现一个完整的文件上传功能(上)

    说到标题就有点心塞了,前段时间项目上需要实现一个文件上传的功能,然后就咔咔的去用了element的upload组件,不用不知道一用吓一跳哇. 在使用的过程中遇到了很多让意想不到的问题,后来也因为时间问 ...

  5. asp 文件上传(ASPUpload组件上传)

    要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload   要实现该功能,就要利用一些特制的文件上传组件 ...

  6. ASP中文件上传组件ASPUpload介绍和使用方法

    [导读]要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload  要实现该功能,就要利用一些特制的文件上 ...

  7. 表单组件 form fastadmin(生成表单元素)

    Form组件 定义文件位置: /extend/fast/Formphp 通用参数 $name 通常为我们组件的名称(name属性值),我们在后台接收时可以通过这个名称来获取到它所对应的值 $value ...

  8. vue全局组件-父子组件传值

    全局组件注册方式:Vue.component(组件名,{方法}) demo: 子组件:upload.vue <template> <div > <div class=&q ...

  9. Vue(十五)组件

    一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码 组件是自定义元素(对象) 2. 定义组件 ...

随机推荐

  1. windows下subversion服务器搭建

    一.下载subversion服务器端和客户端软件 1.subversion下载地址:http://subversion.tigris.org/ 2.svn比较流行的客户端Tortoisesvn下载地址 ...

  2. 在linux使用锐捷客户端上网(华中科技大学)

    第一步:下载锐捷客户端linux版本,下载网址为http://ncc.hust.edu.cn/cyxz/rzkhd.htm 第二步:解压该包,进入目录 #unzip RG_Supplicant_For ...

  3. Hibernate-ORM:01.Hibernate恍如隔世般初见

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 对于学过ORM框架的朋友来说,上手HibernateORM来说,既熟悉有有一点陌生,熟悉无非是灵魂相通,陌生的 ...

  4. Delphi7目录结构----初学者参考

    打开Delphi的安装目录,如C:\Program Files\Borland\Delphi7,你将会看到目录下包含了一些文件和文件夹: ²        Source:存放的是Delpi提供的所有源 ...

  5. GreenMail邮件测试服务器

    GreenMail邮件测试服务器 http://blog.csdn.net/jackiehff/article/details/8741988 这个目前没有需求,所以暂不研究

  6. fidder工具学习抓取Firefox包

    fidder抓取Firefox的https请求 抓包之前需要设置fidder,我下面的截图是fidder4,打开fidder—>Tools—>Options如图: 选择https,勾选所有 ...

  7. Linux shell 整数运算 let [ ] (( )) expr以及 浮点数 bc用法(转)

    Abstract : 1)  Linux shell 中使用 let , [ ] ,(( )) 三种运算符操作 shell 变量进行简单的基本运算:2)Linux shell 中使用 expr 与 b ...

  8. shell语句for循环

    一:常用格式 格式一 for 变量 do 语句 done 格式二 for 变量 in 列表 do 语句 done 格式三 for ((变量=初始值; 条件判断; 变量变化)) do 语句 done 二 ...

  9. Github & DMCA Takedown Policy

    Github & DMCA Takedown Policy Digital Millennium Copyright Act 数字千年版权法案 https://help.github.com/ ...

  10. Sigar应用

    sigar是一个用于获取底层硬件信息比如:CPU,内存,硬盘,网络等等信息的库.其官网如下: https://support.hyperic.com/display/SIGAR/Home   出于项目 ...