上传控件:

<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. pythno学习小结-替换python字典中的key值

    源: d={'a':1,'b':2,'c':3} 目标:key:'b'替换为'e' d={'a':1,'e':2,'c':3} 方法: d['e']=d.pop('b')

  2. jvm中的内存溢出与内存泄露

    内存溢出: 就是我们通常遇到的OutOfMemoryError异常,它俗理解就是内存不够,通常在运行大型程序时发生,当程序所需要的内存远远超出了JVM内存所承受大小,就会报出OutOfMemoryEr ...

  3. vue工程化之去除Eslint验证

    有的时候用vue-cli创建好项目之后,写代码时会出现换行和空格报错,出现这么写错误是什么原因呢? 相信第一次接触时有点摸不着头脑.其实是在你用vue-cli脚手架构建项目时用了ESLint代码检查工 ...

  4. 获取汉字首字母,拼音,可实现拼音字母搜索----npm js-pinyin

      npm install js-pinyin  main.js 引入 import pinyin from 'js-pinyin'   使用组件内 let pinyin = require('js- ...

  5. 第1节 yarn:14、yarn集群当中的三种调度器

    yarn当中的调度器介绍: 第一种调度器:FIFO Scheduler  (队列调度器) 把应用按提交的顺序排成一个队列,这是一个先进先出队列,在进行资源分配的时候,先给队列中最头上的应用进行分配资源 ...

  6. h5移动端常见虚拟键盘顶起底部导航栏解决办法

    在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...

  7. 跨平台字符编码转换GBK、UTF8

    #if (defined _WIN32 || defined _WIN64) # include <windows.h> # include <stdio.h> # inclu ...

  8. CSU1007: 矩形着色

    Description Danni想为屏幕上的一个矩形着色,但是她想到了一个问题.当点击鼠标以后电脑是如何判断填充的区域呢? 现在给你一个平面直角坐标系,其中有一个矩形和一个点,矩形的四条边均是平行于 ...

  9. 笔试算法题(01):字符串倒置 & 八皇后问题

    出题:将字符串“ABCD1234efgh”进行前后对调: 分析: 常见的考查指针使用的案例,知道字符串长度之后,依次交换位置i以及位置(length-1-i)上的内容,直到重叠: 注意不能直接修改指针 ...

  10. 页面jsp向后端发送:HTTP 400错误 - 请求无效(Bad request)

    HTTP 400错误 - 请求无效(Bad request) jsp页面有误 在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说 ...