前端文件上传及后端接收（el-upload标签的使用）

最新推荐文章于 2025-04-02 20:40:08 发布

原创

最新推荐文章于 2025-04-02 20:40:08 发布 · 5.5w 阅读

本文介绍了如何使用elementUI的el-upload组件实现前端文件上传，并通过axios发送到后端。在前端，文件以formData格式存储，通过val.raw添加到formData。后端使用Java接收上传文件，保存到指定目录，并处理后续操作。关键点包括axios的post请求配置、el-upload组件的使用以及后端文件保存逻辑。

一、前端上传

前端主要使用elementUI中的el-upload标签作为上传控件，通过axios发送post请求到后端，将文件上传到服务器中；需要注意的点：前端向后端发送的文件需要以formData格式存储，文件需要通过val.raw的方式将数据传给formData对象

body标签代码：

<!-- 上传对话框 -->
			<el-dialog title="上传" :visible.sync="dialogOfUpload" width="35%" style="text-align: center;">
				<el-upload class="upload-demo" action="#" drag multiple :headers="headers" :auto-upload="false"
				 :file-list="fileList" :on-change="handleChange">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					<div class="el-upload__tip" slot="tip">上传Excel格式文件</div>
				</el-upload>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogOfUpload = false">取 消</el-button>
					<el-button type="primary" @click="confirmUpload()">上 传</el-button>
				</div>
			</el-dialog>

action属性为上传的地址，这里用#号忽略了，使用axios发送请求；
headers为请求头，写死为'Content-Type': 'multipart/form-data'；
auto-upload为是否自动上传，设置为false，关闭自动上传；
file-list为上传的文件列表，为数组的形式；
on-change，文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用；和handleChange函数绑定，文件变化时给fileList赋值，fileList通过这种方式获取值；
date数据代码：

data() {
   
   
				return {
   
   
				    dialogOfUpload: false,
					fileList: [],
					headers: {
   
   
						'Content-Type': 'multipart/form-data'
					}
				}
			},

method方法代码：
fileList存放上传的文件列表
headers设置请求头

methods: {
   
   
				handleChange(file, fileList) {
   
    //文件数量改变
					this.fileList = fileList;
				},

				confirmUpload() {
   
    //确认上传
					var param = new FormData();
					this.fileList.forEach(
						(val, index) => {
   
   
							param.append("file", val.raw);
						}
					<