element-ui 文件上传
<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 文件上传的更多相关文章
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- element中文件上传
vue+element 文件操作 作者:一粒尘土 时间:2019-3-17 注:以下操作针对 vue-cli 目录 使用 组件常用参数 组件常用方法 上传文件 上传文件格式限制 回显文件 下载文件 删 ...
- 基于element UI 的上传插件
为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...
- element ui图片上传方法
<!--商品图片--> <template v-slot:product_cover> <el-upload list-type="picture-card&q ...
- Element ui 上传文件组件(单文件上传) 点击提交 没反应
element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...
- 封装Vue Element的upload上传组件
本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...
- [Vue]写一个简单的文件上传控件
这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 使用Element的u ...
- vue+element UI + axios封装文件上传及进度条组件
1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...
- selenium -文件上传的实现 -对于含有input element的上传
使用selenium做自动化时,我们经常会遇到的一个让人头疼的问题就是文件上传. 问题的难点在于selenium无法识别并操作Windows窗口,若我们可以绕过弹出框直接把文件信息上传给选择按钮,难点 ...
随机推荐
- Android点击事件通过kotlin几种实现方式总结
一般来说,Android点击事件通过kotlin有以下几种实现方式: 1.通过全局接口View.OnClickListener实现,代码如下 //class MainActivity : AppCom ...
- Python“文件操作”Excel篇(上)
大家好,我们今天来一起探索一下用Python怎么操作Excel文件.与word文件的操作库python-docx类似,Python也有专门的库为Excel文件的操作提供支持,这些库包括xlrd.xlw ...
- 全面系统Python3入门+进阶-1-1 导学
python特点 结束
- RabbitMQ 入门教程(PHP版) 简单Demo
RabbitMQ的关键字说明 (1)Broker:经纪人.提供一种传输服务,维护一条从生产者到消费者的传输线路,保证消息数据能按照指定的方式传输.粗略的可以将图中的RabbitMQ Server当作B ...
- 【PV和PVC】kubernetes存储 persistent volume(持久化硬盘)和 persistent volume claim(持久化硬盘请求)
报错:pod has unbound immediate PersistentVolumeClaims (repeated 11 times) pv没有满足pvc需求 https://www.cnbl ...
- ubuntu18.04安装flat-remix-gnome主题
flat-remix-gnome主题的github地址:https://github.com/daniruiz/flat-remix-gnome ubuntu下进行如下操作: sudo add-apt ...
- AI - TensorFlow - 示例05:保存和恢复模型
保存和恢复模型(Save and restore models) 官网示例:https://www.tensorflow.org/tutorials/keras/save_and_restore_mo ...
- iOS-UIDocumentInteractionController打开和预览文档
iOS提供了使用其他app预览文件的支持,这就是Document Interaction Controller.此外,iOS也支持文件关联,允许其他程序调用你的app打开某种文件.而且,从4.2开始, ...
- python基础篇(四)
PYTHON基础篇(四) 内置函数 A:基础数据相关(38) B:作用域相关(2) C:迭代器,生成器相关(3) D:反射相关(4) E:面向对象相关(9) F:其他(12) 匿名函数 A:匿名函数基 ...
- Http 请求到后端过程
描述下网页一个 Http 请求,到后端的整个请求过程 评注:基础题,感觉属于常识题!必会! 回答: 利用DNS进行域名解析 -------> 发起TCP的3次握手 --------> 建立 ...