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

原创 已于 2023-03-31 09:56:07 修改 · 1.5k 阅读 · 5 ·
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个文件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用 :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 1376
记录el-upload导入文件：只上传一个文件，且再次上传会覆盖上一个文件
FTP环境搭建及使用实例–linux系统（使用shell脚本或者使用配置文件）
杰儿__er 的博客
09-22 1887
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 8616
el-upload实现只上传一个文件且再次上传会覆盖前面的文件
vue2 elementui上传组件自动替换上一个文件，el-upload覆盖前一个文件
weixin_43882434的博客
03-06 3373
有问题的评论区提问。
使用el-upload组件覆盖默认的上传行为，可以自定义上传的实现（就是将默认的post方式改成get或者其他）
weixin_44191318的博客
11-09 1405
其主要用到了http-request方法，成功（on-success）和失败（on-error）的函数可以不写。
实现element ui中upload上传覆盖之前的文件
qq_42341467的博客
06-07 5509
使用ElementUi做头像上传实现多次修改只保留最后一次修改的图片做提交 在使用elementUI的时候发现一个问题，就是在上传文件的时候第二个图片无法将第一张图片覆盖，而是将第二个选择的文件保存在fileList数组中，所以导致注册的时候切换了几次头像就插入几次相同数据到数据库中。 当然可以通过elementUI提供的limit属性进行解决，但是当用户第二次选择文件不会触发onChange方法。无法解决根本问题 我的解决方法是在onChange方法中进行判断，判断fileList长度是否大于1个，大于一
如何用input标签上传多个图片并回显
热门推荐
奇迹迪
05-16 2万+
如何用input标签上传多个图片并回显 本文主要记录如何用input标签和jquery实现多图片的上传和回显，不会涉及后端的交互，大概的效果看图 我们从零来做一个这样的demo 第一步： 我们先完善一下我们的页面，默认的input-file标签非常丑，我们美化一下它，不会的可以百度一下，就是外面套个盒子，设置input的opacity为0，然后外面的盒子设计成我们喜欢的样式即可...
开发知识点-NodeJs-npm/Pnpm/Yarn包管理器
aming小老弟
11-08 1561
Node.js 是一个基于 Chrome V8 引擎的开源免费跨平台的 JavaScript 运行环境。由于 Node.js 进程尝试加载 providers.dll 时没有指定 DLL 的绝对路径。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。攻击者可以在当前工作目录写入恶意 DLL 文件进行 DLL劫持攻击。Windows 会按照特定策略进行搜索以找到所需的 DLL 文件。Node.js 组件存在 DLL 劫持漏洞。快速的，节省磁盘空间的包管理工具。
两小时从零学会vue-admin-template框架
drhrht的博客
03-06 7282
一、vue-admin-template 1.项目简介 官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi
element el-upload-文件上传时覆盖上一个文件
swaggy_GM的博客
05-20 2503
<div style="text-align: center"> <el-upload ref="upload" class="upload-demo" drag action="/" accept=".xlsx" :limit="2" :auto-upload='false' :
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 5205
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 2148
上传文件的时候只能上传文件并替换，但是设置limit为1的时候是可以，但是不能重复上传只能是把原来上传的文件删除了才能重新上传。把limit设置为2，然后在on-change事件的时候把原来的文件删除。
el-upload手动上传文件覆盖问题
wwf1225的博客
11-26 2389
:on-change="handleChange" handleChange(files, fileList) { if (fileList.length > 1) { fileList.splice(1, 1); } }
使用el-upload上传文件成功之后解决再次上传被覆盖最新文件的方法
qq_42534492的博客
07-30 8441
可以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 8307
实际项目中想要的效果是：限制只能上传一个文件，并且直接覆盖原来的文件上传。此时删除 :limit="1"和:on-exceed="exceedFile"，在on-change的fileChange中通过this.fileList = [fileList[fileList.length - 1]];获取最后一次选择的文件即可。在使用elementui的Upload 上传组件时，如下代码中使用了limit限定了上传的文件数量，并且做了上传文件数量超限的提示。
vue3 el-upload限制上传格式
最新发布
04-18
<think>嗯，用户想在Vue3中使用element-ui的el-upload组件来限制上传文件的格式。不过根据提供的引用内容，用户可能实际上是在用Element-Plus，因为Element-UI主要是针对Vue2的，而Element-Plus是Vue3版本的。我需要先确认这一点，但根据引用里的代码示例，确实提到了Vue3和Element-Plus的el-upload组件。所以用户可能混淆了element-ui和element-plus的名称，但实际应该使用Element-Plus。 接下来，用户的需求是限制上传文件格式。根据引用中的信息，可以通过设置accept属性来指定文件类型，比如accept=".jpg,.png"。不过，引用[2]提到，虽然设置accept可以限制选择文件的类型，但用户仍然可能通过修改文件选择框的选项来上传其他类型，所以在before-upload钩子中进行进一步的验证是必要的。 因此，我需要提供一个示例代码，展示如何在el-upload中同时使用accept属性和before-upload方法来实现双重验证。同时，用户可能还需要处理上传成功后的回调，以及样式调整。 另外，引用[2]中提到http-request可以覆盖默认的上传行为，但用户的问题可能不需要自定义上传，只需要基本的限制格式。不过，如果用户需要自定义上传逻辑，可能需要使用http-request，但根据问题描述，用户可能只需要前端验证。 还需要注意，在Vue3中，使用Element-Plus的话，组件的导入方式是否正确，以及是否使用了正确的语法，比如组合式API。不过示例代码中使用的是选项式API，可能用户更熟悉这种方式。 总结步骤应该是： 1. 在el-upload组件中添加accept属性，指定允许的文件类型，比如accept=".jpg,.png,.pdf"。 2. 在before-upload方法中检查文件类型，如果不符合，则提示用户并返回false阻止上传。 3. 可能需要处理上传成功后的回调函数，比如更新文件列表或提示成功信息。 4. 注意在限制为只能上传一个文件时，结合limit属性，并在before-upload中检查已有文件数量，如引用[1]中的示例。 现在需要将这些步骤整合成一个Vue3的示例代码，同时确保语法正确，比如使用setup语法或者选项式API。根据用户提供的引用代码，他们可能更倾向于选项式API，所以示例代码可以采用类似结构。 另外，可能需要处理用户上传时的错误提示，比如使用ElMessage来显示警告信息，这需要从Element-Plus中正确导入ElMessage组件。 最后，确保代码中的action属性设置正确，如果用户需要自定义上传，可能需要覆盖http-request，但根据问题描述，可能不需要，所以保持action为某个URL，或者设置为“#”如果暂时不需要后端处理。 检查是否有遗漏的点，比如文件大小限制，但用户的问题仅涉及格式限制，所以可以暂时不考虑。但如果有必要，可以在before-upload中添加文件大小的检查。 现在，编写示例代码，并解释每个部分的作用，确保用户能够理解如何实现文件格式的限制。同时，需要引用提供的引用内容中的相关部分，如引用[1]中的limit属性和before-upload检查，引用[2]中的accept和before-upload验证。</think>在 Vue3 中使用 Element-Plus 的 `el-upload` 组件限制文件格式，可通过以下两种方式实现： ### 实现方案 ```vue <template> <el-upload class="upload-demo" :action="uploadUrl" :limit="1" :accept="allowedTypes" // 设置可接受的文件类型 :before-upload="validateFileType" // 上传前校验 :file-list="fileList" > <el-button type="primary">点击上传（仅支持JPG/PNG/PDF）</el-button> </el-upload> </template> <script> import { ElMessage } from 'element-plus'; export default { data() { return { uploadUrl: '#', // 实际需替换为上传接口地址 allowedTypes: '.jpg,.jpeg,.png,.pdf', // 允许的文件后缀 fileList: [] // 已上传文件列表 }; }, methods: { validateFileType(file) { const allowed = ['image/jpeg', 'image/png', 'application/pdf']; if (!allowed.includes(file.type)) { ElMessage.warning('仅支持 JPG/PNG/PDF 格式'); return false; // 阻止上传[^2] } return true; } } }; </script> ``` ### 关键配置说明 1. **accept 属性** 通过 MIME 类型或文件后缀限制选择器显示的文件类型（如 `.jpg,.pdf`），但需注意： - 浏览器仅过滤选择器显示的文件类型，无法阻止手动修改文件后缀 - 需要与后端文件头校验配合才能完全限制[^2] 2. **before-upload 钩子** 通过校验 `file.type` 属性实现二次验证（需注意不同浏览器返回的 MIME 类型可能不一致） 3. **文件类型对照表** | 文件类型 | MIME 类型 | 常见后缀 | |----------|--------------------------|--------------| | 图片 | image/jpeg, image/png | .jpg, .png | | PDF | application/pdf | .pdf | ### 相关问题 1. 如何同时限制文件格式和文件大小？ 2. 为什么有些 PDF 文件无法通过校验？ 3. 如何实现自定义上传接口的鉴权？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值