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

news2024/12/25 12:20:50

目录

  • 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.coloradmin.cn/o/1419058.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

GMS测试BTSfail-CVE-2022-20451

GMS测试BTSfail-CVE-2022-20451

描述&#xff1a; 项目需要过GMS兼容性测试&#xff0c;BTS这块我们环境没有&#xff0c;送检之后出现了一个BTS的Alert&#xff0c;这个是必须要解决的。下面的warning可以不考虑。 这个是patch问题&#xff0c;根据代理提供的pdf文件找到一个id:为A-235098883的补丁&#xf…
阅读更多...
前缀和入门(c++语言)

前缀和入门(c++语言)

在讲算法之前&#xff0c;我们先来思考一个问题&#xff1a;小明有n个编号为1~n的篮子&#xff0c;每个篮子里装有ai个苹果&#xff0c;求从 x至y 的篮子里的苹果数量之和。 如果没学过前缀和的同学&#xff0c;可能会打出这样的代码&#xff1a; 这种算法要得出一个区间之和&…
阅读更多...
数字艺术展厅有什么好处，搭建数字艺术展厅要注意什么

数字艺术展厅有什么好处，搭建数字艺术展厅要注意什么

引言&#xff1a; 数字艺术展厅是一种利用数字科技手段搭建的艺术展览空间&#xff0c;通过数字化展示艺术品&#xff0c;能够为观众带来全新的艺术体验。那么数字艺术展厅有什么好处&#xff0c;搭建数字艺术展厅要注意什么呢&#xff1f; 一、数字艺术展厅的好处 1.创新艺术…
阅读更多...
（2023）逆转诅咒：由“A is B”训练的LLM没有学到“B is A”

（2023）逆转诅咒：由“A is B”训练的LLM没有学到“B is A”

The Reversal Curse: LLMs trained on “A is B” fail to learn “B is A” 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 2. 实验和结果 4. 讨论和未来工作 0. 摘要 我们…
阅读更多...
动手学深度学习（一）深度学习介绍2

动手学深度学习（一）深度学习介绍2

目录 二、起源 三、深度学习的成功案例&#xff1a; 四、特点&#xff1a; 五、小结&#xff1a; 二、起源 为了解决各种各样的机器学习问题&#xff0c;深度学习提供了强大的工具。 虽然许多深度学习方法都是最近才有重大突破&#xff0c;但使用数据和神经网络编程的核心思…
阅读更多...
代码随想录算法训练营DAY6 | 哈希表(1)

代码随想录算法训练营DAY6 | 哈希表(1)

DAY5休息一天&#xff0c;今天重启~ 哈希表理论基础&#xff1a;代码随想录 Java hash实现 &#xff1a;java 哈希表-CSDN博客 一、LeetCode 242 有效的字母异位词 题目链接&#xff1a;242.有效的字母异位词 思路&#xff1a;设置字典 class Solution {public boolean isAnag…
阅读更多...
C/C++ - 内存管理(C++)

C/C++ - 内存管理(C++)

堆栈 C中的栈和堆是用于存储变量和对象​​的两个主要内存区域。栈是一种自动分配和释放内存的区域&#xff0c;用于存储局部变量和函数调用的上下文。栈上的内存分配和释放是自动进行的&#xff0c;无需手动管理。堆是动态分配内存的区域&#xff0c;用于存储动态创建的对象和…
阅读更多...
Blender教程（基础）-内插面、分离、环切、倒角-08

Blender教程（基础）-内插面、分离、环切、倒角-08

一、内插面 菜单位置如下图位置。 单击需要处理的面&#xff0c;出现一个黄色的圈。 1、菜单选中内插 鼠标悬停在黄色圈内单击左键可以来回实现内插&#xff0c;但是发现并不好操作。 2、快捷键内插 在选中需要操作的面之后&#xff0c;鼠标移动到外面&#xff0c;键盘在英…
阅读更多...
计算机设计大赛 基于图像识别的跌倒检测算法

计算机设计大赛 基于图像识别的跌倒检测算法

前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于图像识别的跌倒检测算法 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/…
阅读更多...
Java图形化界面基本案例

Java图形化界面基本案例

案例&#xff1a; public class exer1 {JFrame snew JFrame("练习");//菜单JMenuBar jMenuBarnew JMenuBar();JMenu wenjiannew JMenu("文件");JMenu bianjinew JMenu("编辑");JMenuItem zidongnew JMenuItem("自动换行");JMenuItem f…
阅读更多...
斜率优化dp模型整理

斜率优化dp模型整理

300. 任务安排1&#xff08;300. 任务安排1 - AcWing题库&#xff09; 思路&#xff1a;很明显这些任务是按顺序排好的&#xff0c;我们能执行的操作只是对它们进行分批&#xff0c;我们可以发现每一批之前的开始时间s&#xff0c;影响的不仅仅是当前这一批的结束时间&#xff…
阅读更多...
Java强训day9（选择题编程题）

Java强训day9（选择题编程题）

选择题 class Person {String name "No name";public Person(String nm) {name nm;} } class Employee extends Person {String empID "0000";public Employee(String id) {super(" ");//要调用父类的有参构造方法否则报错empID id;} } pu…
阅读更多...
常用芯片学习——AMS1117芯片

常用芯片学习——AMS1117芯片

AMS1117 1A 低压差线性稳压器 使用说明 AMS1117 是一款低压差线性稳压电路&#xff0c;该电路输出电流能力为1A。该系列电路包含固定输出电压版本和可调输出电压版本&#xff0c;其输出电压精度为士1.5%。为了保证芯片和电源系统的稳定性&#xff0c;XBLWAMS1117 内置热保护和…
阅读更多...
秋招面试—浏览器原理篇

秋招面试—浏览器原理篇

浏览器原理篇 1.什么是XSS、CSRF,怎么预防&#xff1f; &#xff08;1&#xff09;XSS(跨站脚本攻击)&#xff1a;攻击者将恶意代码植入到浏览器页面中&#xff0c;盗取存储在客户端的Cookie&#xff1b; ​ XSS分为&#xff1a;①存储型&#xff1a;论坛发帖、商品评论、用户…
阅读更多...
大型电商系统商城源码_架构_订单系统_OctShop

大型电商系统商城源码_架构_订单系统_OctShop

中国的电商差不多发展到今天已经有20多年的历史啦&#xff0c;特别是过去的10年里其发展速度与竞争是相当的激烈&#xff0c;发展出了各种各样的模式如&#xff1a;B2B、B2C、B2B2C、O2O、社交电商等等。对于广大的企业或商家来说&#xff0c;电商是一个不可或缺的销售渠道&…
阅读更多...
猫咪不吃东西怎么办？公认适口性好的生骨肉冻干分享

猫咪不吃东西怎么办？公认适口性好的生骨肉冻干分享

猫咪不吃东西怎么办&#xff1f;遇到这类情况主人需要仔细观察并分析情况。如果猫咪出现其他异常症状&#xff0c;如呕吐、腹泻、体温异常等&#xff0c;可能是生病了&#xff0c;应及时就医。如果猫咪没有其他异常症状&#xff0c;那猫咪不吃东西怎么办&#xff1f;可能是猫粮…
阅读更多...
JAVA多线程并发补充

JAVA多线程并发补充

AQS 是一个抽象父类 全称是 AbstractQueuedSynchronizer&#xff0c;是阻塞式锁和相关的同步器工具的框架。 用 state 属性来表示资源的状态&#xff08;分独占模式和共享模式&#xff09;&#xff0c;子类需要定义如何维护这个状态&#xff0c;控制如何获取锁和释放锁 getSt…
阅读更多...
Windows系统云服务器自定义域名解析导致网站无法访问怎么解决？

Windows系统云服务器自定义域名解析导致网站无法访问怎么解决？

本文九河云介绍Windows实例内部自定义域名解析与本地网络域名解析不一致导致无法访问网站的问题描述、问题原因和解决方案。 问题描述 在Windows实例内部通过浏览器无法访问某网站&#xff0c;但在其他设备上可以正常访问&#xff0c;排查发现Windows实例内部自定义域名解析与…
阅读更多...
6.s081 学习实验记录（三）system calls

6.s081 学习实验记录（三）system calls

文章目录 一、use gdb二、syscall&#xff1a;trace注意&#xff1a;实验代码&#xff1a;实验结果&#xff1a; 三、sysinfotips&#xff1a;实验代码实验结果 需要切换到 syscall 分支 一、use gdb 学习使用 gdb 调试 make qemu-gdb打开一个新的终端&#xff1a; gdb-mult…
阅读更多...
Selenium教程11：模拟账号密码，自动登入qq空间

Selenium教程11：模拟账号密码，自动登入qq空间

Python爬虫教程30&#xff1a;Selenium网页元素&#xff0c;定位的8种方法&#xff01; Selenium自动化教程02&#xff1a;浏览器options配置及常用的操作方法 Selenium自动化教程03&#xff1a;延时等待的3种方式 Selenium自动化教程04&#xff1a;鼠标键盘网页的模拟操作 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023