el-upload实现 再次上传文件覆盖前面的文件 的效果

使用Vue的el-upload组件处理文件上传及覆盖
原创 已于 2023-03-31 09:56:07 修改 · 1.6k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #javascript

于 2023-03-22 19:30:41 首次发布
文章讲述了如何在Vue应用中利用el-upload组件进行文件上传操作，特别是通过:on-change事件处理函数handleChange实现文件的覆盖逻辑，限制上传文件类型为.xlsx，并且限制最多只能上传2个文件。

使用 :on-change=“handleChange” 来实现文件的覆盖

 <el-upload
                class="upload-demo"
                action=""
                :http-request="uploadPicture"
                :on-preview="handlePreview"
                :on-remove="handleRemoves"
                :before-remove="beforeRemoves"
                :on-error="imgUploadError"
                :file-list="pictureList"
                :on-change="handleChange"
                list-type="xls"
                :limit="2"
                accept=".xlsx">
                <el-button size="small" type="success" :loading="notUpload" style="width:220px;">点击上传</el-button>
              </el-upload>

handleChange(file, fileList) {
        if (fileList.length > 1) {
          fileList[0] = fileList[1]
          fileList.splice(1, 1);
        }
 },
10086love10010
关注
【vue2+elementui】记录el-upload导入文件：只上传一个文件，且再次上传会覆盖上一个文件
bbt953的博客
07-30 1743
记录el-upload导入文件：只上传一个文件，且再次上传会覆盖上一个文件
FTP环境搭建及使用实例–linux系统（使用shell脚本或者使用配置文件）
杰儿__er 的博客
09-22 1959
linux上使用，仅需要 安装ftp包：yum install -y ftp客户端访问的前提是，ftp服务端需要配置完毕，配置完毕以后 客户端可以直接访问的。 注：ftp服务端只需要把vsftpd服务启动，客户端就可以访问了哦。ftp配置方法见最下面“ftp服务端配置–linux”链接：https://pan.baidu.com/s/1yDal6NTDcPOpNmWA8IebOA?pwd=jar4 提取码：jar4链接：https://pan.baidu.com/s/1EW4ZEwBcT34p2rOYzvE
el-upload实现只上传一个文件且再次上传会覆盖前面的文件
AreYouOkLei的博客
09-05 8750
el-upload实现只上传一个文件且再次上传会覆盖前面的文件
vue2 elementui上传组件自动替换上一个文件，el-upload覆盖前一个文件
weixin_43882434的博客
03-06 3669
有问题的评论区提问。
实现element ui中upload上传覆盖之前的文件
qq_42341467的博客
06-07 5606
使用ElementUi做头像上传实现多次修改只保留最后一次修改的图片做提交 在使用elementUI的时候发现一个问题，就是在上传文件的时候第二个图片无法将第一张图片覆盖，而是将第二个选择的文件保存在fileList数组中，所以导致注册的时候切换了几次头像就插入几次相同数据到数据库中。 当然可以通过elementUI提供的limit属性进行解决，但是当用户第二次选择文件不会触发onChange方法。无法解决根本问题 我的解决方法是在onChange方法中进行判断，判断fileList长度是否大于1个，大于一
element el-upload-文件上传时覆盖上一个文件
swaggy_GM的博客
05-20 2561
<div style="text-align: center"> <el-upload ref="upload" class="upload-demo" drag action="/" accept=".xlsx" :limit="2" :auto-upload='false' :
<template> <el-dialog title="导入" :visible.sync="dialogVisible" width="400px" append-to-body @close="resetDialog" :close-on-click-modal="false"> <el-form class="drawer-multiColumn-form"> <el-form-item> <el-upload class="upload-demo" drag accept=".xlsx" action="" :on-change="handleChangeUp" :before-upload="beforeAvatarUpload" :file-list="fileList" :on-exceed="handleExceed" :limit="excelLimit" :auto-upload="false"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或点击<em>上传</em></div> <div class="el-upload__tip" slot="tip">只能上传exlec文件，且不超过20M</div> </el-upload> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="resetDialog">取 消</el-button> <el-button type="primary" @click="handleConfirm()">保 存</el-button> </span> </el-dialog> </template> <script> export default { name: 'importMenu', props: {}, data() { return { dialogVisible: false, excelLimit: 1, fileType: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"], fileList: [] } }, methods: { handleOpen() { this.fileList = [] this.dialogVisible = true }, resetDialog() { this.fileList = [] this.dialogVisible = false }, beforeAvatarUpload(file) { console.log('kcowepdkeowp') // console.log('file',file) }, handleExceed() { //提示最多只能上传1个 this.$message.warning("最多上传1个文件！"); }, handleChangeUp() { }, handleConfirm() { // console.log('导入的的的额的e') // const data = await this.$Api.systemApi.viewInport(null, { // pathParams: [row.id], // }); } } } </script> 点击beforeAvatarUpload，无法获取数据做文件格式校验，只允许上传exlec
最新发布
09-17
// 实际上，我们只取最后一个文件（因为如果连续选择多个，最后一次选择的文件会覆盖前面的） // 但是，由于我们设置了limit为1，所以实际上只会有一个文件 const currentFile = fileList[0]; // 校验文件类型 ...
【狂神说】JavaWeb笔记整理 | SMBMS项目 | 文件上传和邮件发送
小七自学博客
12-16 3140
目录JavaWeb1.基本概念1.1 概念1.2 web应用程序：1.3 静态web1.4 动态web2.web服务器2.1 技术讲解2.2 web 服务器3. Tomcat3.1 安装Tomcat3.2 Tomcat启动和配置启动和关闭Tomcat出现的问题：3.3 配置可以配置启动的端口号可以配置主机的名称更改主机的默认localhost请你谈谈网站是如何进行访问的！3.4 发布一个web网站4. HTTP4.1 HTTP简介4.2 两个时代4.3 Http请求1.请求行中的请求方式：GET2.请求消息
如何用input标签上传多个图片并回显
热门推荐
奇迹迪
05-16 2万+
如何用input标签上传多个图片并回显 本文主要记录如何用input标签和jquery实现多图片的上传和回显，不会涉及后端的交互，大概的效果看图 我们从零来做一个这样的demo 第一步： 我们先完善一下我们的页面，默认的input-file标签非常丑，我们美化一下它，不会的可以百度一下，就是外面套个盒子，设置input的opacity为0，然后外面的盒子设计成我们喜欢的样式即可...
使用el-upload组件覆盖默认的上传行为，可以自定义上传的实现（就是将默认的post方式改成get或者其他）
weixin_44191318的博客
11-09 1548
其主要用到了http-request方法，成功（on-success）和失败（on-error）的函数可以不写。
element ui中upload上传如何实现覆盖之前的文件
张木期的博客
01-22 1万+
这次在做了项目的时候，选用的是element ui 中的 upload组件，确实比较方便，该想到的功能，组件基本也都封装好了，但是有一条还是有点问题，就是只能上传一个文件的时候，上传另一个文件，实现覆盖之前的文件，我之前的想法是给一个limit=1限制，然后再on-exceed钩子函数里去处理解决，试了好久发现不是那么容易，然后耍了个小聪明，下面贴出源码： ` <el-form-item label="上传算法文件" prop="file2"> <el-up
element el-upload 文件上传覆盖第一个文件
weqrth289942的博客
03-27 5266
upload上传是前端开发很常用的一个功能，在Vue开发中常用的Element组件库也提供了非常好用的upload组件 基本用法： 先来看官网 <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" accept=".xls, .xlsx" :on-preview="handlePreview" :on-remove="handleRemove" :before-re
el-upload上传限制一个文件 并覆盖
weixin_48329823的博客
05-11 2455
上传文件的时候只能上传文件并替换，但是设置limit为1的时候是可以，但是不能重复上传只能是把原来上传的文件删除了才能重新上传。把limit设置为2，然后在on-change事件的时候把原来的文件删除。
el-upload手动上传文件覆盖问题
wwf1225的博客
11-26 2404
:on-change="handleChange" handleChange(files, fileList) { if (fileList.length > 1) { fileList.splice(1, 1); } }
使用el-upload上传文件成功之后解决再次上传被覆盖最新文件的方法
qq_42534492的博客
07-30 8464
可以el-upload组件的属性on-change绑定函数（如:on-change=“handleChange”）来解决，首先需要确定想要上传多少个文件， 如果上传限制了1个文件，则可实现代码如下: methods: { handleChange(file, fileList) { this.fileList = fileList.slice(-1); } } 如果限制了上传n个文件，则可实现代码...
element-ui上传组件（el-upload）单文件上传，单选文件 覆盖已有文件
coding
11-14 1万+
需求：单选文件上传，每次只允许一个文件上传，当已选择了文件再次点击选择其他的文件时，需要覆盖上次选择的文件。但是看了看el-upload的开发文档，好像不支持这个需求，选择新的文件后无法替代旧的。研究了下源码找到了实现方法。 解决方案 思路 利用el-upload的on-exceed，该方法是文件超出个数限制时的钩子，当把上传文件数最大设置为1的时候再次选择新文件时会触发这个方法，利用这个对...
elementui upload限制只能上传一个文件，且覆盖上传
u010234868的专栏
02-16 8855
实际项目中想要的效果是：限制只能上传一个文件，并且直接覆盖原来的文件上传。此时删除 :limit="1"和:on-exceed="exceedFile"，在on-change的fileChange中通过this.fileList = [fileList[fileList.length - 1]];获取最后一次选择的文件即可。在使用elementui的Upload 上传组件时，如下代码中使用了limit限定了上传的文件数量，并且做了上传文件数量超限的提示。
el-upload实现文件分块上传
09-10
要使用 `el-upload` 实现文件分块上传，可以参考以下方法： 首先是 HTML 部分，这里使用 `el-upload` 组件，并指定自定义的上传请求函数 `checkedFile`： ```html <el-upload drag multiple :...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值