当前位置: 首页 > news >正文

springboot + vue+elementUI图片上传流程

1.实现背景

前端上传一张图片,存到后端数据库,并将图片回显到页面上。上传组件使用现成的elementUI的el-upload。、

2.前端页面

在这里插入图片描述

<el-uploadclass="upload-demo"action="http://xxxx.xxx.xxx:9090/file/upload" :show-file-list="false"multiple:limit="3":on-success="handleAvatarSuccess1"><img v-if="package1" :src="package1" class="avatar" alt=""><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>

点击上传后,将图片发送到action后面的接口,之后后端返回图片,回显到img标签。

接口实现

前提:SQL已有一张image表:
在这里插入图片描述

application.yml文件中配置图片存储的位置

files:upload:path: /www/nndemo/sb/ #这里是服务器的文件位置,如果是本地项目,改成某磁盘某文件夹即可

接口实现:

package com.tt.springboot.controller;import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import com.tt.springboot.entity.Images;
import com.tt.springboot.mapper.FileMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.net.URLEncoder;/*** @author TT* @date 2023-10-26 14:47:13* @description 文件上传下载接口* @parms file 前端传递过来的文件*/@RestController
@RequestMapping("/file")
public class FileController {@AutowiredFileMapper fileMapper;@Value("${files.upload.path}")private String fileUploadPath; //图片最终存储的位置@PostMapping("/upload")public String upload(@RequestParam MultipartFile file) throws IOException {String originalFilename = file.getOriginalFilename(); //原始名称String type = FileUtil.extName(originalFilename);//文件类型long size = file.getSize(); //大小//存储到磁盘File uploadParentFile = new File(fileUploadPath);if (!uploadParentFile.exists()){ //文件目录是否存在uploadParentFile.mkdirs();}//定义一个文件唯一标识码String uuid = IdUtil.fastSimpleUUID();String fileUuid = uuid + StrUtil.DOT + type;File uploadFile = new File(fileUploadPath + fileUuid);//把获取到的文件存储到磁盘中去file.transferTo(uploadFile);//存储到数据库String url = "http://xxxx.xxxx.xxx:9090/file/" + fileUuid;Images saveFiles = new Images();saveFiles.setName(originalFilename);saveFiles.setSize(size);saveFiles.setType(type);saveFiles.setUrl(url);fileMapper.saveFile(saveFiles); // 存入数据库,这里项目比较简单,没有三层架构return url;}@GetMapping("/{fileUUID}")public void download( HttpServletResponse response, @PathVariable String fileUUID) throws IOException {File uploadFile = new File(fileUploadPath + fileUUID);ServletOutputStream outputStream = response.getOutputStream();response.setHeader("Content-Disposition","attachment;filename=" + URLEncoder.encode(fileUUID,"UTF-8"));response.setContentType("application/octet-stream");outputStream.write(FileUtil.readBytes(uploadFile));outputStream.flush();;outputStream.close();}
}

fillMapper实现:

@Mapper
public interface FileMapper {@Insert("insert into images(name,size,type,url) values (#{name},#{size},#{type},#{url})")void saveFile(Images files);
}

相关文章:

springboot + vue+elementUI图片上传流程

1.实现背景 前端上传一张图片&#xff0c;存到后端数据库&#xff0c;并将图片回显到页面上。上传组件使用现成的elementUI的el-upload。、 2.前端页面 <el-uploadclass"upload-demo"action"http://xxxx.xxx.xxx:9090/file/upload" :show-file-list&q…...

LabVIEW 系统诊断

LabVIEW 系统诊断是指通过各种工具和方法检测、评估、分析和解决 LabVIEW 程序和硬件系统中可能存在的故障和性能问题。系统诊断不仅涵盖软件层面的调试与优化&#xff0c;还包括硬件交互、数据传输、实时性能等方面的检查和分析。一个成功的系统诊断能够显著提升LabVIEW应用程…...

韩国机场WebGIS可视化集合Google遥感影像分析

目录 前言 一、相关基础数据介绍 1、韩国的机场信息 2、空间数据准备 二、Leaflet叠加Google地图 1、叠加google地图 2、空间点的标记及展示 3、韩国机场空间分布 三、相关成果展示 1、务安国际机场 2、有同类问题的机场 四、总结 前言 12月29日8时57分左右务安国际机…...

springCloudGateWay使用总结

1、什么是网关 功能: ①身份认证、权限验证 ②服务器路由、负载均衡 ③请求限流 2、gateway搭建 2.1、创建一个空项目 2.2、引入依赖 2.3、加配置 3、断言工厂 4、过滤工厂 5、全局过滤器 6、跨域问题...

使用new Vue创建Vue 实例并使用$mount挂载到元素上(包括el选项和$mount区别)

new Vue({...}) 是创建一个新的 Vue 实例的方式。你可以通过传递一个选项对象来配置这个实例。常见的选项包括&#xff1a; •data&#xff1a;定义组件的数据属性。 •el&#xff1a;指定 Vue 实例应该挂载到哪个 DOM 元素上&#xff08;通常是一个选择器字符串&#xff0c;如…...

GTX750Ti打DP补丁

背景 咸鱼收了一个二手的GTX750Ti,用于4K60Hz显示器,HDMI接口勉强可以4K60Hz,不过色彩和帧率都不是太正常,理论上它的HDMI接口是不支持的,原本也是打算用DP接口接显示器的,但是发现接DP口之后无法通过bios的vga检测最终一直重启,在华硕B760-K的BIOS中使能CSM是可以使用…...

springmvc前端传参,后端接收

RequestMapping注解 Target({ElementType.METHOD, ElementType.TYPE}) Retention(RetentionPolicy.RUNTIME) Documented Mapping public interface RequestMapping {String name() default "";AliasFor("path")String[] value() default {};AliasFor(&quo…...

PyTorch 张量的分块处理介绍

分块处理是将大型张量分解成较小的块&#xff0c;以便更高效地进行计算&#xff0c;减少内存占用&#xff0c;特别适用于处理超大张量的场景&#xff08;如深度学习中的大批量数据或大型模型训练&#xff09;。 PyTorch 提供了多种方法来分块张量&#xff0c;包括 chunk、spli…...

在Ubuntu中使用systemd设置后台自启动服务

引言 在Ubuntu系统中&#xff0c;systemd 是一个非常强大的系统和服务管理器。它不仅负责系统的启动和初始化&#xff0c;还可以帮助我们管理各种后台服务。通过使用 systemd&#xff0c;我们可以轻松地设置服务在系统启动时自动运行&#xff0c;并且能够方便地管理服务的启动…...

mongodb清理删除历史数据

批量清理mongodb历史数据 清理程序的原来 目前项目组上很多平台上线历史数据积压&#xff0c;导致入库查询数据缓慢&#xff0c;历史数据有些已经归档&#xff0c;进行历史数据清理删除。 之前临时写shell脚本&#xff0c;太简陋&#xff0c;重新使用Python进行改造&#xff0c…...

C++字体库开发之字体回退策略十六

回退表 { "blocks": [ "UBLOCK_BASIC_LATIN", ], "font": { "family": "Noto Sans SC", "style": [ { "name": "Thin", …...

IO进程day3

一、思维导图 二、作业1 使用C语言编写一个简易的界面&#xff0c;界面如下 1&#xff1a;标准输出流 2&#xff1a;标准错误流 3&#xff1a;文件流 要求&#xff1a;按1的时候&#xff0c;通过printf输出数据&#xff0c;按2的时候&#xff0c;通过perror输出数据&#xff0c…...

【多线程初阶篇¹】线程理解| 线程和进程的区别

目录 一、认识线程Thread 1.为啥引入线程 2.线程理解 &#x1f525; 3.面试题&#xff1a;线程和进程的区别 一、认识线程Thread 1.为啥引入线程 为了解决进程太重量的问题 解释&#xff08;为什么说线程比进程更轻量&#xff1f;/为什么说线程创建/销毁开销比进程小&#…...

wireshark排除私接小路由

1.wireshark打开&#xff0c;发现了可疑地址&#xff0c;合法的地址段DHCP是192.168.100.0段的&#xff0c;打开后查看发现可疑地址段&#xff0c;分别是&#xff0c;192.168.0.1 192.168.1.174 192.168.1.1。查找到它对应的MAC地址。 ip.src192.168.1.1 2.通过show fdb p…...

Docker 从入门到精通

文章目录 Ubuntu 安装Docker步骤前言1. 进入Docker官网&#xff0c;进入开发者页面2. 选择适合自己的安装方式3. 安装 Docker1.更新系统包&#xff0c;安装插件&#xff0c;创建秘钥及目录2.安装 Docker 软件包3.设置开机启动4.通过运行 hello-world 镜像验证安装是否成功 常见…...

uni app 写的 小游戏,文字拼图?文字拼写?不知道叫啥

从下方的偏旁部首中选在1--3个组成上面文章中的文字&#xff0c;完成的文字标红 不喜勿喷 《满江红》 其中用到了两个文件 strdata.json parameters.json 这两个文件太大 放到资源中了 资源文件 <template><view class"wenzi_page_main"><view c…...

Qt监控系统远程网络登录/请求设备列表/服务器查看实时流/回放视频/验证码请求

一、前言说明 这几个功能是近期定制的功能&#xff0c;也非常具有代表性&#xff0c;核心就是之前登录和设备信息都是在本地&#xff0c;存放在数据库中&#xff0c;数据库可以是本地或者远程的&#xff0c;现在需要改成通过网络API请求的方式&#xff0c;现在很多的服务器很强…...

案例研究:UML用例图中的结账系统

在软件工程和系统分析中&#xff0c;统一建模语言&#xff08;UML&#xff09;用例图是一种强有力的工具&#xff0c;用于描述系统与其用户之间的交互。本文将通过一个具体的案例研究&#xff0c;详细解释UML用例图的关键概念&#xff0c;并说明其在设计结账系统中的应用。 用…...

二叉树的层次遍历

二叉树的层次遍历 描述 给你一个二叉树&#xff0c;请你返回其按 层次遍历 得到的节点值&#xff08;即逐层地&#xff0c;从做到右访问所有节点&#xff09; 代码 通过两个数组来交替打印 class Solution(object):def levelOrder(self, root):if root None:return []sta…...

docker推送本地仓库报错

(base) rootainode3:~# dp 192.168.2.186:5000/bert-deepspeed:latest The push refers to repository [192.168.2.186:5000/bert-deepspeed] Get "http://192.168.2.186:5000/v2/": dial tcp 192.168.2.186:5000: connect: connection refused排查思路如下&#xff…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...