008:vue中el-upload不显示上传的文件列表

news2024/10/7 13:17:20

在这里插入图片描述

第008个

查看专栏目录: VUE — element UI

echarts,openlayers,cesium,leaflet,mapbox,d3,canvas 免费交流社区



专栏目标
在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

(1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等
(2)提供element UI的经典操作:安装,引用,国际化,el-row,el-col,el-button,el-link,el-radio,el-checkbox ,el-input,el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop,v-infinite-scroll, el-drawer等

本文章目录

    • 方法
    • template中代码
    • methods中代码

如何在el-upload上传完成的时候,去掉列表呢?

方法

利用 this.$refs.upload.clearFiles();去掉文件列表

template中代码

<el-upload 
  ref="upload" 
  class="upload-demo" 
  :action="actionFile" 
  :headers="headersFile" 
  :on-success="onSuccessFile" 
  :on-error="onErrorFile" 
  :before-upload="beforeFileUpload" 
  :on-progress="onProgressFile" 
  name="file" 
> 
  <el-button 
    size="mini" 
    icon="el-icon-folder-add" 
    plain 
    type="primary" 
    >上传</el-button 
  > 
</el-upload> 

methods中代码

onErrorFile(){ 
   this.$message("导入失败!"); 
   this.$refs.upload.clearFiles(); //去掉文件列表 
 }, 
onSuccessFile(response) { 
   // 你的代码 
   this.$message("导入成功!"); 
   this.$refs.upload.clearFiles(); //去掉文件列表 
}, 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/635286.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

废柴日记8:从入门到入狱的Python爬虫学习笔记1(入门篇)

前言&#xff1a;我错了&#xff0c;但下次也不一定(●’◡’●) 米娜桑&#xff0c;好久不见&#xff0c;不知道这段时间各位手中的西瓜刀有没有按时擦亮呢&#xff1f; 我也是在摸爬滚打将近一年之后总算是找到了一点人生的方向所以当成救命稻草现在正死死握紧不放手的啊。…

【Windows 系统笔记】使用服务器运行装载AList+本地安装RaiDrive进行网盘本地挂载

文章目录 前言准备工作一、购买一台云服务器配置服务器安装宝塔面板新建网站进入当前目录 二、安装AList三、登录四、开启域名访问五、挂载阿里云盘刷新令牌 六、使用RaiDrive挂载到本地 前言 大家肯定很好奇我为什么要写一篇这样的文章&#xff0c;因为之前一直使用本地挂载网…

SQL索引

一、索引概述 介绍&#xff1a; 索引是帮助MySQL高效获取数据的数据结构&#xff08;有序&#xff09;。在数据之外&#xff0c;数据库系统还维护着满足特定查找算法的数据结构&#xff0c;这些数据结构以某种方式引用&#xff08;指向&#xff09;数据&#xff0c;这样就可以…

【数据结构与算法】04 哈希表 / 散列表 (哈希函数、哈希冲突、链地址法、开放地址法、SHA256)

一种很好用&#xff0c;很高效&#xff0c;又一学就会的数据结构&#xff0c;你确定不看看&#xff1f; 一、哈希表 Hash Table1.1 核心概念1.2 哈希函数 Hash Function1.3 哈希冲突 Hash Collision1.4 哈希冲突解决1.41 方法概述1.42 链地址法 Separate Chaining1.43 开放寻址…

几种技巧让大模型(ChatGPT、文心一言)帮你提高写代码效率!

代码神器 自从大模型推出来之后&#xff0c;似乎没有什么工作是大模型不能做的。特别是在文本生成、文案写作、代码提示、代码生成、代码改错等方面都表现出不错的能力。下面我将介绍运用大模型写代码的几种方式&#xff0c;帮助程序员写出更好的代码&#xff01;&#xff08;…

华为OD机试真题 JavaScript 实现【一种字符串压缩表示的解压】【2022Q4 100分】,附详细解题思路

一、题目描述 有一种简易压缩算法&#xff1a;针对全部由小写英文字母组成的字符串&#xff0c;将其中连续超过两个相同字母的部分压缩为连续个数加该字母&#xff0c;其他部分保持原样不变。例如&#xff1a;字符串“aaabbccccd”经过压缩成为字符串“3abb4cd”。 请您编写解…

shell脚本学习记录(重定向)

Shell 输入/输出重定向 大多数 UNIX 系统命令从你的终端接受输入并将所产生的输出发送回​​到您的终端。 输出重定向 重定向一般通过在命令间插入特定的符号来实现。特别的&#xff0c;这些符号的语法如下所示: command1 > file1 上面这个命令执行command1然后将输出的…

maven访问仓库的顺序

1.没有配置私服的情况下&#xff08;大部分情况下&#xff09; 如上图所示&#xff0c;maven是依次从本地仓库、中央仓库和第三方仓库获取依赖的&#xff0c;其实在maven中并不是以这三种类型区分的&#xff0c;在maven中只有两种仓库类型&#xff0c;本地仓库和远程仓库&#…

Systemverilog中的Driving Strength讲解

在systemverilog中&#xff0c;net用于对电路中连线进行建模&#xff0c;driving strength(驱动强度)可以让net变量值的建模更加精确。net变量拥有4态逻辑值(0,1,z,x)&#xff0c;它的driving strength有(supply,strong,pull,weak,highz)。net的值由连接到net的driver源(驱动源…

【开源工具】使用Whisper将提取视频、语音的字幕

这里写目录标题 一、语音转字幕操作步骤1、下载安装包Assets\WhisperDesktop.zip[^2]2、加载模型2.1 下载模型2.1.1 进入Hugging Face[^3]的仓库2.1.2 选择需要下载的模型2.1.3 配置模型路径 3、语音转字幕4、实时语言转录功能 二、相关简介[^1]特点开发人员指南构建说明其他注…

模拟退火(SA)算法

目录 模拟退火算法 主要代码 Mutate Sphere 模拟退火算法 主要代码 repmat 重复数组副本 B repmat(A,n) 返回一个数组&#xff0c;该数组在其行维度和列维度包含 A 的 n 个副本。A 为矩阵时&#xff0c;B 大小为 size(A)*n。 unifrnd 生成连续统一的随机数 sort 对数组进行…

抖音百科词条创建在哪里?

抖音作为中国火爆的短视频平台&#xff0c;拥有相当庞大的用户群体&#xff0c;用户在抖音上创建百科词条就可以获得非常可观的曝光和展现&#xff0c;抖音百科词条是通过哪种方式创建的呢&#xff1f;想要创建一个抖音百科怎么做&#xff1f;接下来伯乐网络传媒就来给大家讲一…

Linux之进程信号(上)

文章目录 前言一、进程信号二、查看命令kill -l与信号解释man 7 signal1.kill -l2.man 7 signal 三、信号的产生1.按键ctrl cctrl zctrl \ 2.系统调用kill——向任意进程发送信号raise——进程给自己发送任意信号abort——进程给自己指定的信号&#xff08;6号信号&#xff…

主流解压缩软件有哪些?这四款可以满足你的所有需求

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 作者会持续更新网络知识和python基础知识&#xff0c;期待你的关注 目录 第一款&#xff1a;bandizip&#xff08;推荐&#xff09; 第二款&#xff1a;7-zip 第三款&#xff1a;Nanazip 第四款&#xff1a…

Vue中如何进行表单自定义验证

Vue中如何进行表单自定义验证 在Vue应用中&#xff0c;表单验证是非常重要的一部分。Vue提供了一些内置的验证规则&#xff0c;比如required、min、max等。但是有时候我们需要对表单进行自定义验证&#xff0c;以满足特定的业务需求。本文将介绍如何在Vue中进行表单自定义验证…

第十章 数学相关

第十章 数学相关 第一节 集合 真题&#xff08;2010-53&#xff09;-数学相关-集合-画饼集能力-朴素逻辑 53.参加某国际学术研讨会的 60 名学者中&#xff0c;亚裔学者 31 人&#xff0c;博士 33 人&#xff0c;非亚裔学者中无博士学位的 4 人。根据上述陈述&#xff0c;参…

Java16:集合

一&#xff1a;Collecction接口 1.单列集合框架结构 》Collection接口&#xff1a;单列集合&#xff0c;用来存储一个一个的对象 》 List接口&#xff1a;存储有序的&#xff0c;可重复的数据---》动态数组&#xff0c;实现类&#xff1a;ArrayList&#xff0c;LinkedList,…

【深蓝学院】手写VIO第3章--基于优化的 IMU 与视觉信息融合--作业

0. 题目 1. T1 T1.1 绘制阻尼因子曲线 将尝试次数和lambda保存为csv&#xff0c;绘制成曲线如下图 iter, lambda 1, 0.002000 2, 0.008000 3, 0.064000 4, 1.024000 5, 32.768000 6, 2097.152000 7, 699.050667 8, 1398.101333 9, 5592.405333 10, 1864.135111 11, 1242.7567…

【书影观后感 十四】左晖-做难而正确的事

距离上一本完整读完的书《李自成》及据此而作的读后感【书影观后感 十三】甲申三百七十八年祭已经接近一年时间了&#xff0c;最近心血来潮读了李翔的访谈形式系列《详谈》的第一本《左晖-做难而正确的事》。 虽然这本薄薄的书只有171页&#xff0c;访谈的形式也看似比较随意…

因果推断18--估计个体治疗效果:泛化界和算法CRF(个人笔记)

目录 1. 介绍 2. 相关工作 3.估计ITE&#xff1a;误差界 4. 估计ITE的算法 5.实验 5.1. 模拟结果&#xff1a;IHDP 5.2. 现实世界的结果&#xff1a;工作 5.3. 结果 6.结论 参考 英文题目&#xff1a;Estimating individual treatment effect: generalization bounds…