vue-element ui-axios-springboot环境：文件和表单上传后端

最新推荐文章于 2025-09-25 00:00:47 发布

原创

最新推荐文章于 2025-09-25 00:00:47 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

本文重点介绍如何使用Element UI的文件上传组件，并结合axios，将文件和表单数据一并发送到SpringBoot后端进行处理。

此文，主要讲解element ui的文件上传功能，以及文件+表单一起作为参数被后端接收的内容。

！！！下面是代码

vue-element ui -axios代码

<template>
    <div class="fileUpLoad">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 文件上传 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="query-condition">
                <!-- 表单数据+上传文件 -->
                <el-form ref="form" :model="form" label-width="130px" :rules="rules">
                    <el-form-item label="描述：" prop="ruleDesc" size="small">
                        <el-input v-model="form.ruleDesc" placeholder="请进行描述" class="input_width"></el-input>
                    </el-form-item>

                    <el-form-item ref="upload_attach_item" label="文件上传：" prop="file" size="small">
                        <!-- accept=".xls,.xlsx" 默认选择上传文件的类型 -->
                        <!-- :limit="1" 限定上传文件的数量 -->
                        <!-- ref="upload_attach" 绑定属性，本地上传文件，会把文件存到let file = this.$refs.upload_attach.uploadFiles里 -->
                        <!-- :on-change=“changFile”，在选取文件后，通过在changFile回调中给全局变量files赋值 -->
                        <!-- :on-exceed="handleExceed" 错误提示，最多上传一个文件 -->
                        <!