当前位置：首页 > news >正文

【使用 Element UI 实现手动上传文件：FormData 追加文件和其他参数，支持单文件覆盖上传】

news 来源：原创 2025/8/9 4:15:53

在开发 Web 应用时，文件上传是一个常见的需求。Element UI 提供了强大的 el-upload 组件，可以轻松实现文件上传功能。本文将详细介绍如何使用 Element UI 实现以下功能：

手动触发文件上传：用户选择文件后，点击按钮手动上传。
使用 FormData 追加文件和其他参数：将文件和其他表单数据一起提交。
单文件覆盖上传：只允许上传一个文件，新文件会覆盖旧文件。

1. 实现思路

为了实现上述功能，我们需要以下几个步骤：

禁用自动上传：通过 auto-upload="false" 关闭自动上传。
手动触发上传：通过 ref 获取 el-upload 实例，调用 submit 方法手动上传。
使用 FormData 追加文件和其他参数：在自定义上传逻辑中，将文件和其他参数添加到 FormData 中。
单文件覆盖上传：通过 limit="1" 限制文件数量，并在 on-change 事件中处理文件覆盖逻辑。

2. 完整代码实现

以下是完整的代码实现：

<template><div><!-- 文件上传组件 --><el-uploadref="upload"action="#"  <!-- action 留空，因为会覆盖上传逻辑 -->:limit="1"  <!-- 限制只能上传一个文件 -->:auto-upload="false"  <!-- 关闭自动上传 -->:file-list="fileList":on-change="handleFileChange":on-exceed="handleFileExceed":http-request="customUpload"  <!-- 自定义上传逻辑 -->><el-button slot="trigger">选择文件</el-button></el-upload><!-- 输入其他参数 --><el-input v-model="params.userId" placeholder="用户ID"></el-input><el-input v-model="params.desc" placeholder="文件描述"></el-input><!-- 手动上传按钮 --><el-button @click="handleManualUpload">上传文件</el-button></div>
</template><script>
import axios from 'axios';export default {data() {return {fileList: [],  // 文件列表params: {      // 其他参数userId: '',desc: ''}};},methods: {// 手动触发上传handleManualUpload() {if (this.fileList.length === 0) {this.$message.warning('请先选择文件');return;}this.$refs.upload.submit();  // 调用 submit 触发自定义上传},// 文件选择变化时的回调handleFileChange(file, fileList) {// 始终保持只有一个文件if (fileList.length > 1) {this.fileList = [fileList[fileList.length - 1]];  // 只保留最新文件} else {this.fileList = fileList;}},// 文件超限时的回调handleFileExceed() {this.$message.warning('只能上传一个文件，新文件将覆盖旧文件');},// 自定义上传逻辑async customUpload(options) {const { file } = options;  // 获取文件对象// 创建 FormDataconst formData = new FormData();formData.append('file', file);  // 追加文件formData.append('userId', this.params.userId);  // 追加其他参数formData.append('desc', this.params.desc);try {// 发送请求const res = await axios.post('https://your-api.com/upload', formData, {headers: {'Content-Type': 'multipart/form-data'  // 必须设置}});// 处理成功this.$message.success('上传成功');this.fileList = [];  // 清空文件列表} catch (error) {// 处理失败this.$message.error('上传失败');}}}
};
</script><style scoped>
/* 样式调整 */
.el-input {margin-bottom: 10px;
}
</style>

运行 HTML

3. 关键点解析

3.1 手动上传

通过 auto-upload="false" 关闭自动上传，并使用 this.$refs.upload.submit() 手动触发上传。

3.2 使用 `FormData` 追加文件和其他参数

在 customUpload 方法中，创建 FormData 对象，将文件和其他参数追加到其中，然后通过 axios 发送请求。

3.3 单文件覆盖上传

通过 limit="1" 限制只能上传一个文件。
在 handleFileChange 中，如果文件列表长度超过 1，则只保留最新文件。
在 handleFileExceed 中，提示用户新文件将覆盖旧文件。

4. 效果演示

选择文件
- 用户点击“选择文件”按钮，选择文件后，文件列表中只显示最新文件。
- 如果用户再次选择文件，旧文件会被新文件覆盖。
输入其他参数
- 用户可以输入 userId 和 desc 等参数。
手动上传
- 点击“上传文件”按钮，文件和其他参数通过 FormData 提交到服务器。

5. 常见问题

5.1 文件上传失败

检查服务器接口是否正确。
确保 FormData 的字段名与服务器要求的字段名一致。

5.2 文件覆盖逻辑失效

确保 handleFileChange 方法中正确处理文件列表。

5.3 样式问题

如果样式不符合需求，可以通过 CSS 调整。

6. 总结

通过 Element UI 的 el-upload 组件，我们可以轻松实现手动上传文件、使用 FormData 追加文件和其他参数、以及单文件覆盖上传的功能。本文提供的代码可以直接用于实际项目中，希望对大家有所帮助！

如果你有其他问题或建议，欢迎在评论区留言讨论~

【使用 Element UI 实现手动上传文件：FormData 追加文件和其他参数，支持单文件覆盖上传】

在开发 Web 应用时，文件上传是一个常见的需求。Element UI 提供了强大的 el-upload 组件，可以轻松实现文件上传功能。本文将详细介绍如何使用 Element UI 实现以下功能： 手动触发文件上传：用户选择文件后，点击按钮手动…...

编程日记 2025/8/9 4:15:53

python基础8 单元测试

通过前面的7个章节，作者学习了python的各项基础知识，也学习了python的编译和执行。但在实际环境上，我们需要验证我们的代码功能符合我们的设计预期，所以需要结合python的单元测试类，编写单元测试代码。 Python有一个内…...

编程日记 2025/8/9 4:11:15

第四节：sqlx库使用指南

在项目中我们通常可能会使用database/sql连接MySQL数据库。本文借助使用sqlx实现批量插入数据的例子，介绍了sqlx中可能被你忽视了的sqlx.In和DB.NamedExec方法。 sqlx介绍在项目中我们通常可能会使用database/sql连接MySQL数据库。sqlx可以认为是Go语言内置datab…...

编程日记 2025/8/9 4:13:24

麒麟操作系统作为服务器，并且需要在浏览器上调试 MATLAB

在内网环境下，使用麒麟操作系统作为服务器，并且需要在浏览器上调试 MATLAB 程序，这确实复杂，但仍然有可行的解决方案。麒麟操作系统是国产化的 Linux 发行版（如基于 Ubuntu Kylin 或银河麒麟），因…...

编程日记 2025/8/6 7:12:26

在线教育网站项目第四步：deepseek骗我， WSL2不能创建两个独立的Ubuntu，但我们能实现实例互访及外部访问

一、说明上一章折腾了半天，搞出不少问题，今天我们在deepseek的帮助下，完成多个独立ubuntu24.04实例的安装，并完成固定ip，实践证明，deepseek不靠谱，浪费我2个小时时间，我们将在下面实…...

编程日记 2025/8/8 22:06:26

AI安全、大模型安全研究（DeepSeek）

DeepSeek 点燃AI应用革命之火，但安全 “灰犀牛” 正在逼近 DeepSeek-R1国产大模型的发布，以技术创新惊艳了全球，更是极致的性价比推动国内千行百业接入 AI，政府、企业竞速开发智能业务处理、智能客服、代码生成、营销文案等应用，“落地效率” 成为第一关键词。然而与此相…...

编程日记 2025/8/9 4:15:43

（hash表+vector 数位和相等数对的最大和)leetcode 2342

一定要断点调试看看数据对不对的上！！！不然很容易弄不清楚值和下标这个题意思是在nums中找出相同数位和的值如数位和为7 nums中符合要求的有 43，7 在这些数中选两个相加取最大值，再与其他数位和取得的相加最大值比…...

编程日记 2025/8/8 11:58:37

正则表达式引擎深入探讨

正则表达式引擎（Regular Expression Engine）是正则表达式得以“活起来”的核心。它是一个精密的软件组件，负责接收正则表达式和输入文本，解析模式并执行匹配或替换操作，最终输出结果——可能是简单的“是否匹配”&…...

编程日记 2025/8/9 4:11:59

[蓝桥杯 2023 省 B] 飞机降落（不会dfs的看过来）

[蓝桥杯 2023 省 B] 飞机降落题目描述 N N N 架飞机准备降落到某个只有一条跑道的机场。其中第 i i i 架飞机在 T i T_{i} Ti 时刻到达机场上空，到达时它的剩余油料还可以继续盘旋 D i D_{i} Di 个单位时间，即它最早可以于 T i T_{i} Ti 时刻…...

编程日记 2025/8/8 23:18:07

DockerTLS加密/不加密传输

前言： 在Docker容器的网络通信中，安全性是至关重要的。DockerTLS作为一种加密传输协议，通过为Docker守护进程与客户端之间的通信提供加密层，有效防止数据在传输过程中被窃取或篡改。然而，在某些特定场景下，…...

编程日记 2025/8/8 5:03:54

基于微信小程序的充电桩管理系统

一、开发背景在开发充电汽车管理系统之前，深入的需求分析至关重要。我们要充分了解不同用户群体的需求，比如私家车主希望充电过程便捷、高效、安全，能够实时查看充电状态和费用明细；出租车、网约车司机则更注重充电速度和充电桩…...

编程日记 2025/8/8 10:22:12

Excel导出工具类--复杂的excel功能导出(使用自定义注解导出)

Excel导出工具类前言: 简单的excel导出,可以用easy-excel, fast-excel, auto-poi,在导出实体类上加上对应的注解，用封装好的工具类直接导出，但对于复杂的场景, 封装的工具类解决不了，要用原生的excel导出(easy-excel, fast-excel, auto-poi都支持原生的) 业务场景: 根据…...

编程日记 2025/8/8 1:26:41

创新实训项目初始化——gitee的使用

创新实训项目管理采用gitee，写下这篇博客熟悉gitee进行项目创建和版本同步一、gitee概述 Gitee 是一个基于 Git 的代码托管平台，与 GitHub 类似，Gitee 提供了丰富的功能，比如代码仓库的创建、分支管理、代码审查等。二、gite…...

编程日记 2025/8/9 4:11:15

【原创】使用ElasticSearch存储向量实现大模型RAG

一、概述检索增强生成（Retrieval-Augmented Generation，RAG）已成为大型语言模型（LLM）应用的重要架构，通过结合外部知识库来增强模型的回答能力，特别是在处理专业领域知识、最新信息或企业私有数…...

编程日记 2025/8/9 4:15:45

Gymnasium Cart Pole 环境与 REINFORCE 算法 —— 强化学习入门 2

Title: Gymnasium Cart Pole 环境与 REINFORCE 算法 —— 强化学习入门 2 文章目录 I. Gymnasium Cart Pole 环境II. REINFORCE 算法1. 原理说明2. REINFORCE 算法实现 I. Gymnasium Cart Pole 环境 Gymnasium Cart Pole 环境是一个倒立摆的动力学仿真环境. 状态空间: 0: Ca…...

编程日记 2025/8/9 4:13:24

响应式数据和 Pinia 状态

响应式数据和 Pinia 状态是 Vue.js 应用中用于管理数据的两种重要机制，它们之间有密切的关系。以下是它们的定义、特点以及关系： 1. 响应式数据定义响应式数据是 Vue.js 的核心特性之一，指的是当数据发生变化时，视图会自动…...

编程日记 2025/8/9 4:11:15

在大数据开发中hive是指什么？

hello宝子们...我们是艾斯视觉擅长ui设计和前端数字孪生、大数据、三维建模、三维动画10年经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩! 在大数据技术的浩瀚星空中，Apache Hive犹如一座桥梁，连接着传统数据仓库理念…...

编程日记 2025/8/9 4:13:24

LeRobot源码剖析——对机器人各个动作策略的统一封装：包含ALOHA ACT、Diffusion Policy、VLA模型π0

前言过去2年多的深入超过此前7年，全靠夜以继日的勤奋，一天当两天用，抠论文抠代码和大模型及具身同事讨论，是目前日常而具身库里，idp3、π0、lerobot值得反复研究，故，近期我一直在抠π0及l…...

编程日记 2025/8/5 5:01:36

Python生成requirements.txt的两种方法

Python生成requirements.txt的两种方法方法一：导出当前环境的依赖包使用pipreqs --encodingutf8为使用utf8编码，避免编码报错 --force 强制执行覆盖生成目录下的requirements.txt # 安装 python3 -m pip install pipreqs # 在当前目录生成 pipreqs . …...

编程日记 2025/8/9 4:15:52

如何判断 MSF 的 Payload 是 Staged 还是 Stageless（含 Meterpreter 与普通 Shell 对比）

在渗透测试领域，Metasploit Framework（MSF）的 msfvenom 工具是生成 Payload（载荷）的核心利器。然而，当我们选择 Payload 时，经常会遇到一个问题：这个 Payload 是 Staged（…...

编程日记 2025/8/8 7:42:12

HTML5与CSS3新特性详解

一、HTML5新特性 1.概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特…...

编程日记 2025/8/9 4:11:59

Redis常用进阶存储原理和主从思路

Redis常用进阶存储原理和主从思路简介此篇用于需要时随时查阅的知识. 由于不断的学习总是会忘记一些所以用于记录笔记对应视频为黑马redis https://www.bilibili.com/video/BV1Pu411Y7bq 单点redis的问题 : 数据丢失问题持久化并发能力弱主从集群存储能力问题 ES故…...

编程日记 2025/8/9 4:15:44

本地部署DeepSeek-R1（Dify升级最新版本、新增插件功能、过滤推理思考过程）

下载最新版本Dify Dify1.0版本之前不支持插件功能，先升级DIfy 下载最新版本，目前1.0.1 Git地址：https://github.com/langgenius/dify/releases/tag/1.0.1 我这里下载到老版本同一个目录并解压拷贝老数据需先停用老版本Dify PS D:\D…...

编程日记 2025/8/9 4:13:52

分治-快速排序系列一＞快速排序

目录题目方法：优化方法：代码： 题目方法： 忘记快速排序看这里：链接: link 优化方法： 代码： public int[] sortArray(int[] nums) {qsort(nums,0,nums.length-1);return nums;}private void qso…...

编程日记 2025/8/9 4:10:24

【spring对bean Singleton和Prototype的管理流程】

在 Spring 框架中，Bean 的作用域决定了 Bean 的生命周期和创建方式。Spring 支持多种作用域，其中最常用的是单例（Singleton） 和原型（Prototype）。以下是 Spring 对单例和原型 Bean 的管理流程详解&#x…...

编程日记 2025/8/9 4:10:23

【Java】grpc-java在IDEA中build不成功的相关问题，Android，codegen C++语言排除

一、解决Android依赖问题在当前grpc-java项目根目录下创建gradle.properties文件，输入以下内容： skipAndroid=true或者 android.useAndroidX=true二、com.google.cloud.tools.appengine插件找不到的问题 Plugin [id: ‘com.google.cloud.tools.appengine’, version: ‘…...

编程日记 2025/8/9 4:13:51

十七、实战开发 uni-app x 项目（仿京东）- 后端指南

前面我们已经用uniappx进行了前端实战学习一、实战开发uni-app x项目（仿京东）-规划-CSDN博客二、实战开发uni-app x项目（仿京东）-项目搭建-CSDN博客三、实战开发 uni-app x 项目（仿京东）- 技术选型-CSDN博客四、实战开发 uni-app x 项目（仿京东）- 页面设计-C…...

编程日记 2025/8/8 12:24:20

SpringSecurity——基于角色权限控制和资源权限控制

目录基于角色权限控制 1.1 自定义 UserDetailsService 1.2 加载用户角色 1.3. 给角色配置能访问的资源（使用切面拦截，使用注解） 总结资源权限控制 2.2. 需要有一个用户；（从数据库查询用户） 2.2 基…...

编程日记 2025/8/9 4:15:52

经历过的IDEA+Maven+JDK一些困惑

注意事项：由于使用过程中是IDEA绑定好另外2个工具，所以报错统一都显示在控制台，但要思考和分辨到底是IDEA本身问题导致的报错，还是maven导致的标准配置 maven Java Compiler Structure 编辑期定义：指的是从open pr…...

编程日记 2025/8/8 10:52:19

基于Arduino控制的温室蔬菜园环境监控系统(论文+源码)

2.1系统总体方案设计本课题为基于Arduino控制的温室蔬菜园环境监控系统，在硬件上结合Arduino 控制器，土壤湿度传感器，ESP8266模块，环境温湿度传感器，光敏电阻，液晶等来构成整个系统，其可以实现…...

编程日记 2025/8/9 1:40:24

关于HAL库的知识1----MSP函数

在 HAL 库中，大部分外设在初始化时都会调用一个对应的 MSP 初始化函数，这个函数的主要作用就是配置与外设相关的底层硬件资源，比如时钟、GPIO、中断、DMA 等。常见的外设及其对应的 MSP 函数包括： UART/USART：对应 HA…...

编程日记 2025/8/9 4:10:23

QT 磁盘文件教程04-创建目录、删除目录、遍历目录

【1】新建目录 bool CreateDir(QString name){QString fileName name ;QDir dir(fileName);if (dir.isEmpty()) {dir.mkdir(fileName);return true;}else{qDebug()<<"文件夹已存在";return false;} } 【2】删除目录 bool DeleteDir(QString fileName){if (…...

编程日记 2025/8/9 4:13:51

高级java每日一道面试题-2025年3月06日-微服务篇[Eureka篇]-Eureka Server和Eureka Client关系?

如果有遗漏,评论区告诉我进行补充面试官: Eureka Server和Eureka Client关系? 我回答: 在微服务架构中，Eureka作为Netflix开源的服务发现组件，由Eureka Server（服务端）和Eureka Client（客户端）两大部分…...

编程日记 2025/8/9 4:10:21

MAC-在使用@Async注解的方法时，分布式锁管理和释放

在使用 @Async 注解的异步方法中管理分布式锁时，需要特别注意锁的获取、释放与异步执行的生命周期匹配。以下是结合 Spring Boot 和 Redis 分布式锁的实践方案： 1. 为什么需要分布式锁？异步方法可能被多个线程/服务实例并发执行，若访问共享资源（如数据库、缓存），需…...

编程日记 2025/8/3 1:37:24

Kafka 八股文

一、基础概念 1. Kafka 是什么？它的核心组件有哪些？ Kafka 的定义 Kafka 是一个分布式流处理平台，最初由 LinkedIn 开发，后成为 Apache 顶级项目。它主要用于高吞吐量的实时数据流处理，支持发布-订阅模式的消息传递…...

编程日记 2025/7/30 4:58:37

现代前端开发框架对比：React、Vue 和 Svelte 的选择指南

引言在当今快速发展的 Web 开发领域，前端框架的选择往往直接影响项目的开发效率、维护成本和用户体验。React、Vue 和 Svelte 作为当前最受关注的三大框架，各自拥有独特的设计哲学与技术实现。本文将通过 5000 字的深度解析，从架构设计、开…...

编程日记 2025/8/5 22:50:19

ffmpeg(库编译) 01 搭建环境和安装依赖

创建目录在home目录下创建 ffmpeg_sources：用于下载源文件 ffmpeg_build：存储编译后的库文件 bin：存储二进制文件（ffmpeg，ffplay，ffprobe，X264，X265等） mkdir ffmpeg_sources ffmpeg_build bin安装依赖先执行sudo apt-get update进行更新，再往下走sudo apt-get -…...

编程日记 2025/7/15 11:47:49

Java后端开发技术详解

Java作为一门成熟的编程语言，已广泛应用于后端开发领域。其强大的生态系统和广泛的支持库使得Java成为许多企业和开发者的首选后端开发语言。随着云计算、微服务架构和大数据技术的兴起，Java后端开发的技术栈也不断演进。本文将详细介绍Java后端开发的核…...

编程日记 2025/8/8 21:01:21

Python高级：GIL、C扩展与分布式系统深度解析

文章目录 📌 **前言**🔧 **第一章：Python语言的本质与生态**1.1 **Python的实现与版本演进**1.2 **开发环境与工具链** 🔧 **第二章：元编程与动态特性**2.1 **描述符协议（Descriptor Protocol）*…...

编程日记 2025/8/5 4:31:50

数学之握手问题

问题描述小蓝组织了一场算法交流会议，总共有 50人参加了本次会议。在会议上，大家进行了握手交流。按照惯例他们每个人都要与除自己以外的其他所有人进行一次握手 (且仅有一次)。但有 7 个人，这 7 人彼此之间没有进行握手 (但这 7 人与除这 …...

编程日记 2025/8/6 6:58:25

【Nodejs】2024 汇总现状

之前已经调研了容器、nexus-public，实现了本地构建应用镜像和基础设施的镜像。为实现分布式一体化协作开发的目标，还需要配套的线上协作开发环境。故而重回前端调研现状，比较 5 年前的 nodejs 快好的啊。以下是针对 Node.js 工具链的深度解析…...

编程日记 2025/8/8 1:10:59

人工智能之数学基础:矩阵的降维

本文重点在现实世界中，我们经常会遇到高维数据。例如，图像数据通常具有很高的维度，每个像素点都可以看作是一个维度。高维数据不仅会带来计算和存储上的困难，还可能会导致 “维数灾难”，即随着维度的增加，数据的稀疏性和噪声也会增加，从而影响数据分析的效果。因此，我…...

编程日记 2025/8/9 1:31:40

数仓开发那些事(10)

某神州优秀员工：（没错，这个diao毛被评为了优秀员工）一闪，听说你跑路了，不做零售行业了一闪：没错，老东家的新it总监上任后大家都开始躺平，失去了当年的动力，所…...

编程日记 2025/8/8 1:26:41

【手工】早教游戏：下楼的猴子

一、效果二、准备材料吸管: 10.4 c m 10.4cm 10.4cm；棉签： 6 6 6 根双头棉签；硬币：1角；纸皮人: 2.0 c m 4.0 c m 2.0cm4.0cm 2.0cm4.0cm；纸板： 12.0 c m 30.0 c m 12.0cm30.0cm 12.0cm30…...

编程日记 2025/8/8 1:26:41

力扣刷题46. 全排列

46. 全排列 - 力扣（LeetCode） 使用dfs搜索，查找所有的情况，首先定义所有的链表集合list，在定义每一种情况的链表res，在主函数中遍历所有的初始元素，首先初始化res，并且添加到res中&…...

编程日记 2025/8/8 1:18:56

【工作记录】pytest使用总结

1、 fixture夹具可参考： python3.x中 pytest之fixture - 漂泊的小虎 - 博客园 fixture是指夹具（把用例夹在中间），它包括前置工作和后置工作，前置是用例代码的准备阶段，后置是用例执行之后的清理阶段,用…...

编程日记 2025/8/7 8:15:11

linux 命令 mkdir

以下是 Linux mkdir 命令的简明总结，适合快速查阅和实际场景应用： 基础语法 mkdir [选项] 目录名... 常用选项速查选项作用-p自动创建父目录（解决多级目录问题） mkdir -p a/b/c-m直接设置权限（替代chmod&#xff0…...

编程日记 2025/8/5 13:13:25

浏览器对一个资源设置了缓存，如何清除缓存，且后续请求不命中缓存

方式1、浏览器端强制刷新方式2、修改资源url eg：如下图，添加了查询参数 <link rel"stylesheet" href"style.css?v1.2.1"> <script src"app.js?t20231010"></script> 原理：1、在资源的…...

编程日记 2025/8/7 8:21:07

k8s的存储

一 configmap 1.1 configmap的功能 configMap用于保存配置数据，以键值对形式存储。 configMap 资源提供了向 Pod 注入配置数据的方法。镜像和配置文件解耦，以便实现镜像的可移植性和可复用性。 etcd限制了文件大小不能超过1M 1.2 configmap的使用…...

编程日记 2025/7/31 7:02:53

[JavaScript]如何利用作用域块避免闭包内存泄漏？

出自《你不知道的JavaScript》上卷以下是本书给出的反例: function process (data) {...} var bigdata{...} process(bigdata); var btn document.getElementById(x); btn.addEventListener(click, function click{...});click会被回调在其他位置, 在addEventListener函数内…...

编程日记 2025/8/5 4:41:27

1. 实现思路

2. 完整代码实现

3. 关键点解析

3.1 手动上传

3.2 使用 FormData 追加文件和其他参数

3.3 单文件覆盖上传

4. 效果演示

5. 常见问题

5.1 文件上传失败

5.2 文件覆盖逻辑失效

5.3 样式问题

6. 总结

相关文章：

3.2 使用 `FormData` 追加文件和其他参数