需求:我司要求实现多文件上传,且要求使用formData传递参数。
环境:vue+element-ui+axios
实现:
1. 使用element-ui upload组件搭建上传文件页面,页面示例如下:

代码如下:
<template>
<div>
<el-upload :multiple="true" class="upload-demo" action="" drag="" ref="upload" :on-change="handleImport" :auto-upload="false" :http-request="uploadFile" name="file">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__text">
只能上传.xml文件
</div>
</el-upload>
<el-row :span="20">
<el-col :guter="20" align="left" style="margin-top:20px;">
<el-button size="small" type="primary" style="margin-right:10px;" @click="submitUpload">
确定
</el-button>
<el-button size="sma

本文介绍如何在Vue和Element-UI环境中,使用formData实现多文件上传功能。通过element-ui的upload组件创建上传页面,监听onChange事件存储文件列表,点击上传时将文件追加到formData并发送POST请求。后端使用Java SpringMVC接收。
最低0.47元/天 解锁文章
3792





