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

springboot+vue+elementUi 实现多文件文件上传,并且通过配置nginx 回显图片 springboot+vue+elementUi 实现多文件文件上传,并且通过配置nginx 回显图片 1. 首先在springboot项目的yml中配置,图片的地址跟图片的访问路径 #文件上传路径 uploadFilePath: D:\\resource #nginx代理路径 uploadFileMapping: http://localhost:8888/resource 2.编写后端接收图片方法 @Value("${uploadFilePath}") //图片地址 Stri 阅读详情

此文,主要讲解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" 错误提示,最多上传一个文件 -->
                        <!
在Ubuntu中搭建Springboot服务器和Vite-vue前端(6)-完结-进阶前后端交互(二)前端UI和axios 完结。这一节将会使用到element-plus来搭建界面ui,vue-router来实现前端页面的路由跳转,以及使用axios访问后端api,实现前后端交互。 阅读详情

相关推荐

掌握前后端分离:SpringBoot + Vue Element UI实战项目

前后端分离架构是一种将用户界面和业务逻辑分离的软件开发模式。在这种模式下,前端负责展示,后端负责数据处理。这种分离让前端开发者和后端开发者可以并行工作,提高了开发效率。Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。它使用"约定优于配置"的原则,提供了一系列大型项目中常见的默认配置,旨在减少项目搭建时的配置工作。Spring Boot让开发者能够快速启动和运行Spring应用程序,并能与Spring生态系统无缝集成。

weixin_33628677的博客 1146

手把手教你用MOS管设计双电源自动切换电路(附零压降方案)

本文详细介绍了使用MOS管设计双电源自动切换电路的完整方案,包括基础电路拓扑、零压降优化设计及实战调试技巧。针对外接电源与电池供电的无缝切换需求,提供低损耗MOS管选型建议和性能实测数据,帮助工程师解决传统二极管方案的压降与漏电问题。

h0i1j2k3l的博客 1457

数字IC设计之时序分析基础概念汇总

时序分析主要有两种办法:静态时序分析: (static timing analysis,STA),是遍历电路存在的所有时序路径,根据给定工作条件(PVT)下的时序库.lib文件计算信号在这些路径上的传播延时,检查信号的建立和保持时间是否满足约束要求,根据最大路径延时和最小路径延时找出违背时序约束的错误。

weixin_45230720的博客 5608

【Unity Shader】2D模型 3D模型混用的穿模问题(Spine在3D场景中出现前后穿模问题的解决办法)

问题描述: 在3D场景中使用Spine模型(2D), 因为Spine需要像Billboard类似的处理,永远是垂直与相机的, 所以一般情况下2D模型能正常显示且前后的阻挡关系也是没有问题的,如下图所示,一切都很美好.(这里用一个四边形,图中的福字表示2D模型) 可是如果后面蓝色的格子比较高,或者2D角色本身也比较高,那么就会出现模型穿插的问题,如下图所示: 如果吧2D模型竖立起来,前后关系肯定是没有问题的,所以也能避免模型穿插的问题,可是就没有Billboard效果,圆形的福字已经被压扁了,如下图:

Vitens的专栏 4594

AI报告撰写实战指南:从提示词工程到全流程优化的底层逻辑与实践突破

传统AI写作常被诟病为“信息拼贴”——模型虽能生成文本,却常出现逻辑断裂、数据矛盾、风格不符等问题。而“全流程优化”则是通过系统化设计,将报告生成拆解为需求解析→数据对齐→提示词设计→初稿生成→迭代优化→格式适配六大环节,每个环节均通过技术手段提升输出质量。提示词工程:本质是通过结构化指令(如角色设定、任务分解、格式约束、示例引导)精准控制模型输出方向,是连接用户需求与模型能力的“翻译器”。全流程优化。

2501_92808811的博客 888

揭秘Coze图生图隐藏玩法:用Excel批量生成100+电商主图(扣子插件进阶教程)

本文深入解析了如何利用Coze(扣子)的图像生成插件实现电商主图的批量自动化生产。通过将Excel数据源、参数化提示词模板与参考图风格相结合,构建了一套高效的企业级解决方案,能够快速为海量SKU生成风格统一的高质量图片,大幅提升电商运营效率。

theta的博客 435

Amos实战:如何用Bootstrap法检验中介效应?附完整操作步骤

本文详细介绍了如何使用Amos软件通过Bootstrap法检验中介效应,包括模型设定、参数配置和结果解读。Bootstrap方法因其不依赖正态分布假设、统计功效高等优势,成为中介效应分析的首选方法。文章提供了完整的操作步骤和实用建议,帮助研究者准确评估变量间的中介作用机制。

zz67890的博客 1444

【零基础入门unity游戏开发——unity通用篇12】导入导出unity资源包、设置编程工具、创建脚本(组件)规则、MonoBehaviour基类介绍、脚本模板(基于unity6开发介绍)

导入导出unity资源包、设置编程工具、创建脚本(组件)规则、MonoBehaviour基类介绍、脚本模板(基于unity6开发介绍)

向宇的博客,专注php/web全栈 unity游戏开发,欢迎大家评论纠错 764

YOLOv11改进策略【SPPF】| 将特征金字塔池化修改为:SPPCSPC,提升模型的特征提取能力和计算效率。

本文记录的是。YOLOv7中的SPPCSPC(Spatial Pyramid Pooling Cross Stage Partial Connections)模块是一种结合了(SPP)和(CSP)的改进结构,本文将其添加到YOLOv11中,

Limiiiing的博客 1823

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

上一篇: svn提交报错:is out of date
下一篇: java项目启动端口号被占用,怎么办?1.结束占用此口号的进程 2.为java项目改端口号
zsj_javaer
博客等级 码龄5年 1粉丝 16原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值