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

最新推荐文章于 2024-07-14 16:55:53 发布

zsj_javaer

最新推荐文章于 2024-07-14 16:55:53 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/zsj_javaer/article/details/126417786

版权

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

摘要由CSDN通过智能技术生成

此文，主要讲解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=“chan