【JaveWeb教程】(32)SpringBootWeb案例之《智能学习辅助系统》的详细实现步骤与代码示例(5)文件上传的实现

目录

  • SpringBootWeb案例05
    • 2. 文件上传
      • 2.1 简介
      • 2.2 本地存储

在这里插入图片描述

SpringBootWeb案例05

前面我们已经实现了员工信息的条件分页查询以及删除操作。 关于员工管理的功能,还有两个需要实现新增和修改员工。
本节的主要内容:

  • 文件上传

2. 文件上传

在我们完成的新增员工功能中,还存在一个问题:没有头像(图片缺失)

在这里插入图片描述

上述问题,需要我们通过文件上传技术来解决。下面我们就进入到文件上传技术的学习。

文件上传技术这块我们主要讲解三个方面:首先我们先对文件上传做一个整体的介绍,接着再学习文件上传的本地存储方式,最后学习云存储方式。

接下来我们就先来学习下什么是文件上传。

2.1 简介

文件上传,是指将本地图片、视频、音频等文件上传到服务器,供其他用户浏览或下载的过程。

文件上传在项目中应用非常广泛,我们经常发微博、发微信朋友圈都用到了文件上传功能。

在这里插入图片描述

在我们的案例中,在新增员工的时候,要上传员工的头像,此时就会涉及到文件上传的功能。在进行文件上传时,我们点击加号或者是点击图片,就可以选择手机或者是电脑本地的图片文件了。当我们选择了某一个图片文件之后,这个文件就会上传到服务器,从而完成文件上传的操作。

想要完成文件上传这个功能需要涉及到两个部分:

  1. 前端程序
  2. 服务端程序

我们先来看看在前端程序中要完成哪些代码:

<form action="/upload" method="post" enctype="multipart/form-data">姓名: <input type="text" name="username"><br>年龄: <input type="text" name="age"><br>头像: <input type="file" name="image"><br><input type="submit" value="提交">
</form>

上传文件的原始form表单,要求表单必须具备以下三点(上传文件页面三要素):

  • 表单必须有file域,用于选择要上传的文件

    <input type="file" name="image"/>
    
  • 表单提交方式必须为POST

    通常上传的文件会比较大,所以需要使用 POST 提交方式

  • 表单的编码类型enctype必须要设置为:multipart/form-data

    普通默认的编码格式是不适合传输大型的二进制数据的,所以在文件上传时,表单的编码格式必须设置为multipart/form-data

前端页面的3要素我们了解后,接下来我们就来验证下所讲解的文件上传3要素。

在提供的"课程资料"中有一个名叫"文件上传"的文件夹,直接将里的"upload.html"文件,复制到springboot项目工程下的static目录里面。

在这里插入图片描述

下面我们来验证:删除form表单中enctype属性值,会是什么情况?

  1. 在IDEA中直接使用浏览器打开upload.html页面

在这里插入图片描述

  1. 选择要上传的本地文件

在这里插入图片描述

  1. 点击"提交"按钮,进入到开发者模式观察

在这里插入图片描述

我们再来验证:设置form表单中enctype属性值为multipart/form-data,会是什么情况?

 <form action="/upload" method="post" enctype="multipart/form-data">姓名: <input type="text" name="username"><br>年龄: <input type="text" name="age"><br>头像: <input type="file" name="image"><br><input type="submit" value="提交"></form>

在这里插入图片描述

知道了前端程序中需要设置上传文件页面三要素,那我们的后端程序又是如何实现的呢?

  • 首先在服务端定义这么一个controller,用来进行文件上传,然后在controller当中定义一个方法来处理/upload 请求

  • 在定义的方法中接收提交过来的数据 (方法中的形参名和请求参数的名字保持一致)

    • 用户名:String name
    • 年龄: Integer age
    • 文件: MultipartFile image

    Spring中提供了一个API:MultipartFile,使用这个API就可以来接收到上传的文件

在这里插入图片描述

问题:如果表单项的名字和方法中形参名不一致,该怎么办?

  • public Result upload(String username,Integer age, MultipartFile file) //file形参名和请求参数名image不一致
    

解决:使用@RequestParam注解进行参数绑定

  • public Result upload(String username,Integer age, @RequestParam("image") MultipartFile file)
    

UploadController代码:

@Slf4j
@RestController
public class UploadController {@PostMapping("/upload")public Result upload(String username, Integer age, MultipartFile image)  {log.info("文件上传:{},{},{}",username,age,image);return Result.success();}}

后端程序编写完成之后,打个断点,以debug方式启动SpringBoot项目

在这里插入图片描述

打开浏览器输入:http://localhost:8080/upload.html , 录入数据并提交

在这里插入图片描述

通过后端程序控制台可以看到,上传的文件是存放在一个临时目录

在这里插入图片描述

打开临时目录可以看到以下内容:

在这里插入图片描述

表单提交的三项数据(姓名、年龄、文件),分别存储在不同的临时文件中:

在这里插入图片描述

当我们程序运行完毕之后,这个临时文件会自动删除。

所以,我们如果想要实现文件上传,需要将这个临时文件,要转存到我们的磁盘目录中。

2.2 本地存储

前面我们已分析了文件上传功能前端和后端的基础代码实现,文件上传时在服务端会产生一个临时文件,请求响应完成之后,这个临时文件被自动删除,并没有进行保存。下面呢,我们就需要完成将上传的文件保存在服务器的本地磁盘上。

代码实现:

  1. 在服务器本地磁盘上创建images目录,用来存储上传的文件(例:E盘创建images目录)
  2. 使用MultipartFile类提供的API方法,把临时文件转存到本地磁盘目录下

MultipartFile 常见方法:

  • String getOriginalFilename(); //获取原始文件名
  • void transferTo(File dest); //将接收的文件转存到磁盘文件中
  • long getSize(); //获取文件的大小,单位:字节
  • byte[] getBytes(); //获取文件内容的字节数组
  • InputStream getInputStream(); //获取接收到的文件内容的输入流
@Slf4j
@RestController
public class UploadController {@PostMapping("/upload")public Result upload(String username, Integer age, MultipartFile image) throws IOException {log.info("文件上传:{},{},{}",username,age,image);//获取原始文件名String originalFilename = image.getOriginalFilename();//将文件存储在服务器的磁盘目录image.transferTo(new File("E:/images/"+originalFilename));return Result.success();}}

利用postman测试:

注意:请求参数名和controller方法形参名保持一致

在这里插入图片描述

通过postman测试,我们发现文件上传是没有问题的。但是由于我们是使用原始文件名作为所上传文件的存储名字,当我们再次上传一个名为1.jpg文件时,发现会把之前已经上传成功的文件覆盖掉。

解决方案:保证每次上传文件时文件名都唯一的(使用UUID获取随机文件名)

@Slf4j
@RestController
public class UploadController {@PostMapping("/upload")public Result upload(String username, Integer age, MultipartFile image) throws IOException {log.info("文件上传:{},{},{}",username,age,image);//获取原始文件名String originalFilename = image.getOriginalFilename();//构建新的文件名String extname = originalFilename.substring(originalFilename.lastIndexOf("."));//文件扩展名String newFileName = UUID.randomUUID().toString()+extname;//随机名+文件扩展名//将文件存储在服务器的磁盘目录image.transferTo(new File("E:/images/"+newFileName));return Result.success();}}

在解决了文件名唯一性的问题后,我们再次上传一个较大的文件(超出1M)时发现,后端程序报错:

在这里插入图片描述

报错原因呢是因为:在SpringBoot中,文件上传时默认单个文件最大大小为1M

那么如果需要上传大文件,可以在application.properties进行如下配置:

#配置单个文件最大上传大小
spring.servlet.multipart.max-file-size=10MB#配置单个请求最大上传大小(一次请求可以上传多个文件)
spring.servlet.multipart.max-request-size=100MB

到时此,我们文件上传的本地存储方式已完成了。但是这种本地存储方式还存在一问题:

在这里插入图片描述

如果直接存储在服务器的磁盘目录中,存在以下缺点:

  • 不安全:磁盘如果损坏,所有的文件就会丢失
  • 容量有限:如果存储大量的图片,磁盘空间有限(磁盘不可能无限制扩容)
  • 无法直接访问

为了解决上述问题呢,通常有两种解决方案:

  • 自己搭建存储服务器,如:fastDFS 、MinIO
  • 使用现成的云服务,如:阿里云,腾讯云,华为云

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/652026.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

详解 C++ 中移动构造与移动赋值

1. 基本介绍 移动赋值语法原理 移动赋值语法的原理是基于右值引用&#xff08;rvalue reference&#xff09;的概念。在C11中引入了右值引用&#xff0c;通过使用双 ampersands&#xff08;&&&#xff09;来声明一个右值引用。 右值引用 右值引用可以绑定到临时对象&a…

从 React 到 Qwik:开启高效前端开发的新篇章

1. Qwik Qwik 是一个为构建高性能的 Web 应用程序而设计的前端 JavaScript 框架,它专注于提供即时启动性能,即使是在移动设备上。Qwik 的关键特性是它采用了称为“恢复性”的技术,该技术消除了传统前端框架中常见的 hydration 过程。 恢复性是一种序列化和恢复应用程序状态…

日常学习之:如何使用 dockerfile 将 vue 的单独前端项目通过 docker 的方式部署到 heroku上

文章目录 需求描述开始操作准备阶段&#xff1a;准备 server.js 文件并安装依赖&#xff0c;将 vue 项目包装成单独的服务器制作 server.js安装 server.js 需要的依赖 构建 Dockerfileheroku container 链接和部署其他细节 需求描述 你想用 vue 构建前端&#xff0c;用 django…

设计模式六(模板方法模式)

是一种行为型的设计模式&#xff0c;将一些步骤的实现延迟到子类有些步骤是固定的可以抽取父类&#xff0c;在父类中实现各个步骤&#xff0c;并且在父类中定义一个流程控制方法&#xff0c;将某个容易发生变化的步骤定义为抽象方法&#xff0c;针对不同的子类实现不同的方法&a…

【设计模式】阿里终面:你觉得这个例子是策略模式吗?

什么是策略模式&#xff1f; 策略模式&#xff0c;举几个贴近生活的例子&#xff1a;当我们出行的时候&#xff0c;不同的出行方式就是不同的策略&#xff0c;例如走路、开车、骑自行车、坐飞机、坐邮轮等等&#xff0c;每一种出行方式都代表着不同的费用和时间&#xff1b;当…

关于css 的基础试题

CSS是什么的缩写&#xff1f; A. Creative Style SheetsB. Cascading Style SheetsC. Computer Style SheetsD. Colorful Style Sheets 在HTML中&#xff0c;通过什么标签引入CSS样式&#xff1f; A. <script>B. <style>C. <link>D. <css> 以下哪个选项…

make: *** No rule to make target ‘clean‘. Stop.

项目场景&#xff1a; 在Ubuntu下编写makefile文件编译的时候,出现make: *** No rule to make target ‘clean’. Stop. 问题描述 make: *** No rule to make target ‘clean’. Stop. 解决方案&#xff1a; 原本我makefile文件的名字是MakeFile , 把它改为makefile以后完美运…

腾讯云OpenCloudOS安装ES(elasticsearch7.17.16)

腾讯云OpenCloudOS安装ES&#xff08;elasticsearch7.17.16&#xff09; 下载ES 先从官网下载es的Linux解压包官网地址 https://www.elastic.co/cn/downloads/past-releases/elasticsearch-7-17-16 下载完成后&#xff0c;将其放置在自己想要放到的路径下 配置ES 解压文件 …

第五季特别篇:一夜杯、游戏之宴 2017.04.26

第五季特别篇&#xff1a;一夜杯、游戏之宴 2017.04.26 OVA 第1话&#xff1a;一夜酒杯 / 一夜杯OVA 第2话&#xff1a;游戏之宴 / 遊戯の宴 OVA 第1话&#xff1a;一夜酒杯 / 一夜杯 遭到独角妖袭击的妖怪夫妇日土和初菜被夏目所救&#xff0c;这对妖怪夫妇制作的酒杯&#xf…

R数据分析:非劣效性研究设计的统计处理方法,原理和实例

在我们经常接触的统计模式中&#xff0c;我们是在寻求推翻原假设&#xff0c;证明差异&#xff0c;这种统计模型在传统的临床试验中&#xff0c;在各种统计推断中已经成为默认了。在传统的临床试验中通常会将一种新的治疗方法与标准治疗或安慰剂进行比较&#xff0c;从而证明这…

【Spring Boot 3】【@Scheduled】动态删除定时任务

【Spring Boot 3】【@Scheduled】动态删除定时任务 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技…

###C语言程序设计-----C语言学习(5)#

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步&#xff01; 一. 主干知识的学习 1.switch语句 switch语句可以处理多分支选…

Linux详细笔记大全

第0章 Linux基础入门 什么是计算机 计算机的组成: 控制器,是整个计算机的中枢神经,根据程序要求进行控制,协调计算机各部分工作及内存与外设的访问等。 运算器,功能是对数据进行各种算术运算和逻辑运算。 存储器,功能是存储程序、数据和各种信号、命令等信息。 输入设备…

LeetCode链表总结

206.反转链表 两种方法&#xff0c;一种是迭代法&#xff08;头插法&#xff09;&#xff0c;一种是递归法。头插法比较简单&#xff0c;就不再多说了&#xff0c;讲下递归法。主要是要注意递归以后head->next指向的是哪个结点&#xff0c;其实head->next的指向是不变的…

第二模块 函数模块

第二模块 函数&模块 day09 文件操作相关1. 文件操作1.1 读文件1.2 写文件1.3 文件打开模式1.4 常见功能1.5 上下文管理练习题 2.csv格式文件3.ini格式文件4.XML格式文件4.1 读取文件和内容4.2 读取节点数据4.3 修改和删除节点4.4 构建文档 5.Excel格式文件5.1 读Excel5.1 写…

微信小程序之页面导航、生命周期和WXS脚本

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

STM32F407移植OpenHarmony笔记2

接上篇&#xff0c;搭建完开发环境后&#xff0c;我们还要继续工作。 官方合作的开发板刚好有STM32F407&#xff0c;我准备试一下开发板的demo&#xff0c;虽然我用的不是他们的开发板。 先下载以下3份代码&#xff1a; https://gitee.com/openharmony/device_board_talkweb…

Python 使用重构重命名一键更改变量名的方法

一个变量有多处引用的情况下&#xff0c;需要重命名&#xff0c;可以使用重构重命名进行一键更改。 方法是:选择变量名–>右键–>Refactor–>Rename&#xff08;也可以使用快捷&#xff1a;选择变量后按下ShiftF6&#xff09;&#xff0c;然后直接输入新的变量名即可…

基于Matlab/Simulink直驱式风电储能制氢仿真模型

接着还是以直驱式风电为DG中的研究对象&#xff0c;上篇博客考虑的风电并网惯性的问题&#xff0c;这边博客主要讨论功率消纳的问题。 考虑到风速是随机变化的&#xff0c;导致风电输出功率的波动性和间歇性问题突出&#xff1b;随着其应用规模的不断扩大以及风电在电网中渗透率…

[echarts] 图表工具栏 toolbox

option{// 工具栏配置toolbox:{id:1, // 组件IDshow:true, // 是否显示工具栏orient:horizontal, // 工具栏 icon 的布局朝向itemSize:15, // 工具栏 icon 的大小itemGap:10, // 工具栏…