上传控件:

<el-upload class="upload-demo"  :on-change="filesChange">


filesChange方法:

filesChange(file, fileList) {
                if (file.size > 2000000) {
                    this.$message({
                        showClose: true,
                        message: "单个文件大小必须小于2Mb",
                        type: "warning"
                    });
                    var index = fileList.indexOf(file);
                    if (index > -1) {
                        fileList.splice(index, 1);
                    }
                }                 //判断文件名是否重复
                var count = 0
                var index = 0    // 记录要删除的文件下标               
                fileList.forEach((item, idx) => {
                    //在此处,对比文件名,将文件名相同的对比次数累加,
                    // 相同的文件名累加值为 2 时,说明文件名已经重复,直接删掉。
                    if (file.name == item.name) {
                        count++
                        if (count == 1) {
                            index = idx;
                        }
                        if (count === 2) {
                            this.$message({
                              message: file.name + '文件已存在',
                              type: 'info'
                            })              
                            fileList.splice(index, 1)
                        }
                    }
                })                
            },

Vue中删除重复上传的文件的更多相关文章

  1. umask设置导致的weblogic中的应用上传的文件没有权限打开

    去年,在公司的某一weblogic上部署的web应用上传文件后却没有读的权限.因为weblogic在Linux上部署,上传文件是mount到了一台安装了NFS的Windows Server上. 当时本 ...

  2. vue中element 的上传功能

    element 的上传功能 最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传upload 看完文档后,感觉有两种思路可以实现 基于before-upload :上传文件之前的钩子,参数为上传的 ...

  3. asp.net中使用swfupload上传大文件

    转载:http://www.cnblogs.com/niunan/archive/2012/01/12/2320705.html 花了一天多时间研究出来的,其实也就是网上下别人的代码然后再自己修修改改 ...

  4. 在windows中使用PuTTy上传下载文件和目录

    打开windows的cmd,使用cd命令切换到PuTTy安装目录 C:\Users\NUC>cd C:\Program Files\PuTTY 在cmd中使用pscp命令上传下载文件 windo ...

  5. 解决WordPress中无法将上传的文件移动至wp-content/uploads

    搭建lnmp环境,放一个wordpress建站系统 lnmp环境很快就搭建完成了,但是在放wordpress的时候出现了一些问题 最主要的问题: 1.第一个是wp-content/uploads没有权 ...

  6. WordPress中"无法将上传的文件移动至"错误的解决方法

    #chown -R www:www /wwwroot 今天在网页上传图片到博客,结果提示:“无法将上传的文件移动至 /home/wwwroot/wp-content/uploads/2013/”,郁闷 ...

  7. MVC应用程序中管理(更新)上传的文件

    实现上传文件功能,有时上传也会操作出错,能让用户有改正有机会,开发上传文件能有更新的功能. 文件上传时,如果是存储于应用程序某一目录的话,在更新时需要了解一些流程,先是删除旧文件,更新数据表相关信息, ...

  8. linux中使用lftp上传下载文件

    lftp是linux中一款ftp服务器相比windows中的ftp显得要复杂不少了,下面我来总结一下lftp文件上传,文件下载,及文件查找等等相关命令吧. lftp连接的几种方法,最常用的是lftp ...

  9. 删除input上传的文件路径

    上传文件时,选择了文件后想清空文件路径,搜索了一下,用两种方法解决 <input type="file" id="fileupload" name=&qu ...

随机推荐

  1. Asp.Net 设计模式 之 “特殊”的单例模式

    特殊的单例模式 要点在这里,提前预览: public SingleDemo() { name = "yy"; age = 20; //特殊的单例,this指代得失当前的Single ...

  2. 迅为i.MX6Q嵌入式开发板

    工业级核心板:核心板10层高速PCB设计,充分保证电磁兼容. 01. 处理器:开发板默认是四核商业扩展级芯片,可根据用户需求更换单核.双核.工业级.汽车级处理器,批量更省成本. 02. 扩展引脚:32 ...

  3. Discuz3.1登录QQ互联显示redirect uri is illegal(100010)的解决

    QQ互联最近也是BUG不断,引起了很多用户的不满,从早前关闭群组功能,到发布2.0接口标准,引发系列站长用户的连锁反应.而Discuz从X3开始,为了应对QQ互联的2.0接口标准,采用了云平台来整合Q ...

  4. ALTER DATABASE 修改一个数据库

    SYNOPSIS ALTER DATABASE name SET parameter { TO | = } { value | DEFAULT } ALTER DATABASE name RESET ...

  5. C#override与new修饰隐藏的区别(转载)

    C#比java多一个new隐藏的功能.C# override重写相当于java中没有关键字的方法重写.所以java中方法是没有隐藏功能的. C# override重写,是指对父类中的虚方法(标记vir ...

  6. 如何手写一款KOA的中间件来实现断点续传

    本文实现的断点续传只是我对断点续传的一个理解.其中有很多不完善的地方,仅仅是记录了一个我对断点续传一个实现过程.大家应该也会发现我用的都是一些H5的api,老得浏览器不会支持,以及我并未将跨域考虑入内 ...

  7. org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException 前言中不允许有内容 来自类路径资源的XML文档中的第1行是无效的

    今天复习一下Spring和Hibernate的整合,遇到了一个问题,报错信息如下: org.springframework.beans.factory.xml.XmlBeanDefinitionSto ...

  8. [转]TOpenDialog

    转自:http://www.cnblogs.com/zhangzhifeng/archive/2011/08/04/2127395.html 1.TOpenDialog组件的典型用法“打开”对话框是用 ...

  9. 源码学习-String类

    最近在扫描CodeDex时报了一个不能使用String.intern()的字符串来做锁对象的告警,对这个问题有疑问查了些资料,顺便学习一下String类的源码. 1.类定义 String 被final ...

  10. 第十七节:Scrapy爬虫框架之item.py文件以及spider中使用item

    Scrapy原理图: item位于原理图的最左边 item.py文件是报存爬取数据的容器,他使用的方法和字典很相似,但是相比字典item多了额外的保护机制,可以避免拼写错误或者定义错误. 1.创建it ...