el-upload上传文件使用http-request方法，formdata传集合List到后台

最新推荐文章于 2025-05-08 14:59:35 发布

冯浩(grow up)

最新推荐文章于 2025-05-08 14:59:35 发布

阅读量2.7k

点赞数 4

分类专栏： element element-plus 文章标签： vue element javascript vue.js

本文链接：https://blog.youkuaiyun.com/m0_50207524/article/details/139307072

版权

本文介绍如何在Vue中利用element-ui的el-upload组件，通过http-request覆盖默认上传行为，获取本地file文件，并用formData传递包含List的集合到Springboot后台。详细讲述了on-change、before-upload等钩子的使用，以及file-list回显列表的方法。

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

前言

在使用el-upload上传文件，会遇到必须使用:action="upload_url"远端链接的问题，本章我们讲解怎样不适用远端链接，通过上传获取到本地的file文件，然后通过new formData来传递给后台

1、使用el-upload上传文件

在这里插入图片描述

http-request 覆盖默认的上传行为，可以自定义上传的实现

on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 function(file, fileList)

before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 function(file)

1.1代码演示

<el-form-item>
            <el-upload action="#" 
	            class="upload-demo" 
	            :http-request="httpRequest" 
	            :on-change="fileChange" 
	            :before-upload="beforeUpload" 
	            :file-list="fileList"
            >
              <el-button type="primary">点击上传</el-button>
            </el-upload>

最低0.47元/天解锁文章