<el-form-item>
<el-upload
ref="upload"
class="upload-demo"
:action="daoruUrls"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileArr"
:on-success="handleSuccess"
:before-upload="beforeUploadFile"
:auto-upload="false"
:data="daoru"
:limit="1"
:on-exceed="onexceed"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button
style="margin-left: 10px;"
size="small"
type="success"
@click="daorusubmitForm('daoruForm')"
>导入</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
</el-upload>
</el-form-item>
// 导入确认
daorusubmitForm(form) {
console.log('111', this.fileArr)
// console.log("form", form, this.$refs[form]);
this.$refs[form].validate(valid => {
this.$refs.upload.submit()
})
},
// 导入关闭
daorucloseDialog() {
this.daorudialogFormVisible = false
},
// 导入之前
beforeUploadFile(file) {
console.log('上传之前', file)
console.log('daoru', this.daoru)
const isLt10M = file.size / 1024 / 1024 < 10
const isText = file.type === 'application/vnd.ms-excel'
const isTextComputer =
file.type ===
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
if (!isLt10M) {
this.$message.error('上传文件大小不能超过10MB!')
return false
}
if (!isText && !isTextComputer) {
this.$message.error('上传文件类型必须为excel!')
return false
}
},
// 导入成功
handleSuccess: function(res, file, fileList) {
console.log('成功', res, file, fileList)
const _this = this
console.log(res)
if (res.success === true) {
_this.$alert('上传成功', '提示', {
confirmButtonText: '确定',
callback: action => {
this.currentPage = 1
this._reportList()
this.daorudialogFormVisible = false
}
})
} else {
_this.$alert('上传失败,请稍后再试', '提示', {
confirmButtonText: '确定',
callback: action => {
this.daorudialogFormVisible = false
this.fileArr = []
}
})
}
},
// 删除文件
handleRemove(file, fileList) {
console.log('file删除', file, fileList)
},
// 选中文件
handlePreview(file) {
// this.fileArr = file;
console.log('file选中', file)
},
// 文件限制
onexceed(files, fileList) {
this.$message({
message: '最多只能上传一个文件',
type: 'error'
})
console.log('files, fileList', files, fileList)
}

element-ui 文件上传的更多相关文章

  1. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  2. element中文件上传

    vue+element 文件操作 作者:一粒尘土 时间:2019-3-17 注:以下操作针对 vue-cli 目录 使用 组件常用参数 组件常用方法 上传文件 上传文件格式限制 回显文件 下载文件 删 ...

  3. 基于element UI 的上传插件

    为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...

  4. element ui图片上传方法

    <!--商品图片--> <template v-slot:product_cover> <el-upload list-type="picture-card&q ...

  5. Element ui 上传文件组件(单文件上传) 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  6. 封装Vue Element的upload上传组件

    本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...

  7. [Vue]写一个简单的文件上传控件

    ​这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 ​ 使用Element的u ...

  8. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  9. 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结

    实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...

  10. selenium -文件上传的实现 -对于含有input element的上传

    使用selenium做自动化时,我们经常会遇到的一个让人头疼的问题就是文件上传. 问题的难点在于selenium无法识别并操作Windows窗口,若我们可以绕过弹出框直接把文件信息上传给选择按钮,难点 ...

随机推荐

  1. shell编程系列20--文本处理三剑客之awk常用选项

    shell编程系列20--文本处理三剑客之awk常用选项 awk选项总结 选项 解释 -v 参数传递 -f 指定脚本文件 -F 指定分隔符 -V 查看awk的版本号 [root@localhost s ...

  2. spring2.5 jdk1.8

    今天运行一个14年基于spring2.5的项目,出现下面错误 Unexpected exception parsing XML document from class path resource .. ...

  3. Spring cloud微服务安全实战-5-1单点登录基本架

    基于微服务架构,前后端分离实现SSO 前后端分离到底是个什么样的架构. 中间不是用Nginx而是用Node JS. node.js在服务端的页面渲染,这样搜索引擎爬虫 来爬的时候 爬的就是html页面 ...

  4. windows10 环境下的RabbitMQ安装步骤(图文)

    第一步:下载并安装erlang 原因:RabbitMQ服务端代码是使用并发式语言Erlang编写的,安装Rabbit MQ的前提是安装Erlang. 下载地址:http://www.erlang.or ...

  5. Shell中 2>/dev/null

    1.文件描述符 Linux系统预留可三个文件描述符:0.1和2,他们的意义如下所示: 0——标准输入(stdin) 1——标准输出(stdout) 2——标准错误(stderr) 标准输出——stdo ...

  6. Redis应用场景大全

    1.字符串使用场景 a) 缓存功能 典型使用场景:Redis作为缓存层,MySQL作为存储层,绝大部分请求的数据都是从Redis中获取,由于Redis具有支撑高并发的特性,所以缓存通常能起到加速读写和 ...

  7. Vue个人笔记

    目录 前言 Vue的插值表达式怎么保留小数位 表格列被挤,位置很小 v-if多个条件 前言 此笔记仅仅记录我在使用过程中遇到的一些问题,不定期更新 Vue的插值表达式怎么保留小数位 插值表达式其实都是 ...

  8. windows命令行 共享文件夹

    net share dpantemp2 /DELETEnet share dpantemp2=d:\temp2 /GRANT:jk,FULL /REMARK:" web api 共享&quo ...

  9. poj3660(floyd最短路)

    题目链接:https://vjudge.net/problem/POJ-3660 题意:给出一个有向图,n个结点,每个结点的权值为[1,n]中的一个独特数字,m条边,如果存在边a->b,说明a的 ...

  10. [CF1209F]Koala and Notebook_堆优化dij

    Koala and Notebook 题目链接:https://codeforces.com/contest/1209/problem/F 数据范围:略. 题解: 开始的时候看错题了....莫名其妙多 ...