后端之路——文件本地上传

一、基础原理

文件上传是一个很基础的知识点,尤其是本地上传,在现实开发基本都是云上传,但是作为一个基础要简单了解一下

首先前端我就不多讲解了,网页开发里用<form>表单可以上传文件,只需要加上这三属性: 【action="接口路径"】   【method="post"】   【enctype="multipart/form-data"】就可以上传文件了,这里我不打算讲细,因为这主要是讲后端,有兴趣的自己额外研究一下

代码在这,自己直接复制粘贴就行:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文件上传</title><style>.submit{width: 100px;height: 30px;margin-top: 20px;margin-left: 120px;}input{height: 30px;margin-bottom: 20px;}form{width: 20%;border: 1px solid black;padding: 20px;margin: auto;margin-top: 250px;display: flex;flex-direction: column;}</style></head>
<body><form action="/upload" method="post" enctype="multipart/form-data">姓名:<input type="text" name="userName">年龄:<input type="text" name="age">头像:<input type="file" name="image"><input type="submit" value="提交" class="submit"></form>
</body>
</html>

提示:

这里为了方便我就直接在【spring boot工程】里写了前端页面,如果要在spring boot工程写前端html页面,必须在【resources】的【static】目录下设置

而且注意,你的html文件的文件名是啥,你到时【接上后端服务之后】访问的前端页面的网址路径就是啥:

在接入后端之前,我们在html文件右上角浏览器临时运行一下就行,后期接上了后端的接口之后再【运行整个后端项目】,然后访问【后端的网址+html文件名】来运行页面

然后打开浏览器的【检查】,右边除了我们常用的Console控制台,还有一个Network网络,谷歌是【Network】,别的可能是中文【网络】

谷歌浏览器Edge浏览器

点到当我们点击【submit提交按钮】时,就会触发一个【请求】,点一下就能展开,就能看到【请求的详情】:

谷歌浏览器

Edge浏览器

然后找到【请求头】(Request Headers),勾选【原始】(Raw)就能看到原请求头代码信息

可以看到【Content-Type】这块有两信息:第一个是表单上传的内容形式,第二个是多个信息上传时,信息之间的分隔符

那么我们具体的信息在哪,可以点到【负载】(Payload)看到我们传过去的信息

上面就是在浏览器查看文件上传的一些基本原理

二、然后讲一下后端怎么获取到上传的资源

注意,前端用<form>的形式发送请求的时候,后端的【请求注解】对应【form的action属性】和【form的method请求方式】、后端的【请求方法的参数名】要对应【form的每个输入框的name属性】

—— 然后后端接收文件参数的数据类型得是【MultipartFile】

当然要是参数名跟form的name属性名不也一样也可以,加一个【@RequestParam(" ")】注解就可以

那么现在在controller层加一个【controller类】,就叫:UpLoadController吧

代码如下:

//写你们自己的路径
//package com.czm.tliaswebmanagement.controller;
//import com.czm.tliaswebmanagement.pojo.Result;import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;@Slf4j
@RestController
public class UpLoadController {@PostMapping("/upload")public Result uplaod(String userName, Integer age, MultipartFile image){log.info("上传过来的参数{}  {}  {}",userName, age, image);return Result.success();}
}

接着在运行整个后端项目之前,在你的log.info输出日志的部分打个断点

然后点击【调试】,不要点【运行】,【调试】的话日志才能捕捉到前端发来的请求

然后到前端页面发送一下请求,就会跳到后端看到信息

然后点开“文件”的【location】,这个路径就是我们本地文件的地址

把路径复制到电脑文件夹跳转,就能看到文件了,这里三个文件是对应userName、age、image三个数据

不过这里的原理是:每次上传的时候,后端虽然能接收到文件,但只会生成【临时文件】,再运行完之后就会删除临时文件

只要去掉断点,在重新放行让程序运行完,再回到那个文件夹就会发现那三个文件被清空了

那就需要【文件上传的本地储存

三、后端获取文件后本地储存

因为黑马讲得太细了,而且现实开发里本来本地储存就很少用,那我这里就简短高效讲了

其实上传文件的原理就是:前端把文件变为二进制编码数据,通过后端传送给服务器,然后服务器保存下来这个文件。

那么现在我们本地储存的话,就可以理解本机电脑就是一个服务器了,我们就可以指定将文件保存到哪个位置

代码很简单,逻辑就是1、【获取文件名】,2、调用【文件.transferTo()】方法来指定文件存储路径,然后存储,3、给transferTo()里传入一个【File对象】,参数就是结尾是【文件名】的【绝对路径】字符串

(简单了解不要记,我后面会放源代码在下面,以后直接复制粘贴即可)

写的时候如果报错,那就鼠标悬停,点一下那个提示的帮助方法,就会在方法头那加一个【throws IOException抛出异常】就OK了

但是如果要传递多个文件,如果存在相同文件名的文件,上一个就会被覆盖,比如原来上传了一个【1.png】的文件,后面又上传一个叫【1.png】的文件,就会把上一张覆盖了,所以我们要保证每个文件名要【不同】【唯一】,那么就调用【UUID.randomUUID.toString()】方法获得随机的唯一的乱码字符串,来作为文件名

完整代码:(这就是完整的本地文件存储的代码,以后用到直接来这【复制】就行)

//写你们自己的路径
//package com.czm.tliaswebmanagement.controller;
//import com.czm.tliaswebmanagement.pojo.Result;import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.util.UUID;@Slf4j
@RestController
public class UpLoadController {@PostMapping("/upload")public Result uplaod(String userName, Integer age, MultipartFile image) throws IOException {log.info("上传过来的参数{}  {}  {}",userName, age, image);/*---------------------------------【本地存储】----------------------------------*///获取本地文件名(比如:1.jpg、 xxx.txt、 qids.png...)String originalFileName = image.getOriginalFilename();//获取原文件名的后缀名【.jpg】、【.png】、【.html】...int index = originalFileName.lastIndexOf(".");String extname = originalFileName.substring(index);//然后生成一个新的文件名String newFileName = UUID.randomUUID().toString() + extname;//调用【文件的transferTo】方法,往里面传入一个【File对象】,就可以指定文件【存储的具体路径】//当然【存储的具体路径】包括了【前面的绝对路径】+【后面的文件名】//下面例子就是把“F:\images\”和“asjhwuhwndm.jpg”拼成“F:\images\asjhwuhwndm.jpg”image.transferTo(new File("F:\\images\\" + newFileName));/*----------------------------------------------------------------------------*/return Result.success();}
}

最后一步,去【application.properties】文件,把下面两个代码配置上去,因为文件保存默认限制了单个文件1M以内,多个文件上传也有大小限制,这两个配置你就可以根据自己需要上传大文件了

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

四、发请求试一下

注意发请求这里写接口时,参数换成body的【form-data】,然后类型选【file】

发送请求的时候就点那个【Upload】按钮,上传你的本地文件,这里我传来三次不同的图片,我就不一一演示了

点开文件夹,成功

缺点就是文件本地会爆,所以了解即可,可能会用到,但不多,大部分还是【云存储】

下一篇讲:阿里云OSS云存储文件

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

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

相关文章

pytest系列——pytest_runtest_makereport钩子函数获取测试用例执行结果

前言 pytest测试框架提供的很多钩子函数方便我们对测试框架进行二次开发&#xff0c;可以根据自己的需求进行改造。 例如&#xff1a;钩子方法&#xff1a;pytest_runtest_makereport &#xff0c;可以更清晰的了解测试用例的执行过程&#xff0c;并获取到每个测试用例的执行…

(译文)IRIG-B对时编码快速入门

原文 PDF&#xff1a;https://ww1.microchip.com/downloads/aemDocuments/documents/FTD/tekron/tekronwhitepapers/221223-A-guide-to-IRIG-B.pdf IRIG-B3 概论 Inter-Range Instrument Group 时间码&#xff08;简称IRIG&#xff09;是一系列标准时间码格式。用于将时间信…

使用Cloudflare免费开启全站https配置SSL证书

HTTPS 我的服务器和域名是在华为云&#xff0c;华为云SSL证书巨贵&#xff0c;通过Cloudflare可以将自己的网站免费设置成https。 Cloudflare注册 访问Cloudflare, 注册账号。 添加站点 添加你自己的站点&#xff0c;选择免费的套餐。 添加DNS 添加你的域名、子域名、…

PCB阻抗控制为何如此重要?

或许你在各个厂商打PCB板的时候&#xff0c;会遇到询问你是否需要阻抗的的下单需求&#xff1f; 在当今的应用中&#xff0c;设计通常变得越来越快&#xff0c;控制布局参数比以往任何时候都更加重要。 在PCB设计和生产过程中&#xff0c;有几种方法可以进行阻抗控制。最常见的…

轻松转换!两款AI工具让word秒变ppt!

想把Word文档一键生成PPT&#xff0c;过去有一个很常见的做法&#xff1a;先在Word文档中设置标题样式&#xff0c;通过标题样式来分隔每一部分&#xff0c;之后导出为PPT&#xff0c;就能得到一份PPT的雏形&#xff0c;但这种方法无法对PPT自动进行美化&#xff0c;即得到的只…

ZGC在三色指针中的应用

ZGC基于颜色指针的并发处理算法 ZGC初始化之后&#xff0c;整个内存空间的地址视图被设置为Remapped&#xff0c;当进入标记阶段时的视图转变为Marked0&#xff08;也称为M0&#xff09;或者Marked1&#xff08;也称为M1&#xff09;&#xff0c;从标记阶段结束进入转移阶段时…

计算机学生在大学四年应是以数据结构和算法为重还是技术为重?

我给你说点比较实在的吧&#xff0c;不管你是不是计算机专业科班出身的大学生&#xff0c;不管你在不在本科大学&#xff0c;不管你的出身和背景如何&#xff0c;想要走上计算机工作岗位&#xff0c;那必须得有拿得出手的一技之长&#xff0c;这个行业是靠技术吃饭的。 刚好我有…

Kotlin算法:把一个整数向上取值为最接近的2的幂指数值

Kotlin算法&#xff1a;把一个整数向上取值为最接近的2的幂指数值 import kotlin.math.ln import kotlin.math.powfun main(args: Array<String>) {val number intArrayOf(2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18)number.forEach {println("$…

一.1 信息就是位+上下文

hello程序的生命周期是从一个源程序&#xff08;或者说源文件&#xff09;开始的&#xff0c;即程序员通过编辑器创建并保存的文本文件&#xff0c;文件名是hello.c。源程序实际上就是一个由0和1组成的位&#xff08;又称为比特&#xff09;序列&#xff0c;8个位被组织成一组&…

python读取指定文件夹下的图片(glob获取)

python读取指定文件夹下的图片&#xff08;glob获取&#xff09; 定义traverse_images函数&#xff0c;仅需要改变下根路径即可 glob是python中用来查找符合特定规则的文件路径名的函数 import os from glob import globdef traverse_images (folder_path):image_formats …

ESIX配置备份和恢复

ESIX虽然重装很快&#xff0c;但是原本配置就丢失了&#xff0c;在硬件不变的情况下&#xff0c;可以使用配置备份和配置恢复的方法。 1、备份配置 1.1、执行以下两条命令 vim-cmd hostsvc/firmware/sync_configvim-cmd hostsvc/firmware/backup_config如下图&#xff0c;只需…

7月6日 VueConf 技术大会即将在深圳举办

7月6日&#xff0c;VueConf 2024 即将在深圳召开&#xff0c;本次大会正值 Vue.js 十周年&#xff0c;旨在聚焦 Vue.js 社区的成员&#xff0c;分享最新的技术动态、经验以及创新实践。 本次参与 VueConf 大会的是来自全球 Vue.js 核心团队成员、行业专家及前端开发者。其中&a…

Elasticsearch:Node.js ECS 日志记录 - Winston

这是继上一篇文章 “Elasticsearch&#xff1a;Node.js ECS 日志记录 - Pino” 的续篇。我们继续上一篇文章来讲述使用 Winston 包来针对 Node.js 应用生成 ECS 向匹配的日子。此 Node.js 软件包为 winston 记录器提供了格式化程序&#xff0c;与 Elastic Common Schema (ECS) …

【MySQL】MySQL连接池原理与简易网站数据流动是如何进行

MySQL连接池原理与简易网站数据流动是如何进行 1.MySQL连接池原理2.简易网站数据流动是如何进行 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f60…

SSM高校学生综合测评系统-计算机毕业设计源码16154

摘要 随着互联网时代的到来,同时计算机网络技术高速发展,网络管理运用也变得越来越广泛。因此,建立一个BS 结构的高校学生综合测评系统,会使高校学生综合测评系统工作系统化、规范化,也会提高高校学生综合测评系统平台形象,提高管理效率。 本学生综合测评系统是针对目前高校学生…

君方智能设计平台-对象持久化技术方案

1.背景介绍 1.1序列化功能 序列化是将复杂的图形对象、数据结构或对象转换成一种可被存储、传输或分享的格式的过程。这个格式通常是二进制或文本形式&#xff0c;能够轻松地保存在文件中或通过网络发送到其他应用程序。序列化的目的是将数据持久化&#xff0c;使其在不同时间…

服务器本地部署文件服务器minio

minio类似于阿里云的OSS&#xff0c;为不方便把图、文、日志等形式的文件保存在公有云上的&#xff0c;可以在自己的服务器上部署文件服务器 看过本人前几个文章的&#xff0c;使用docker就会很快上手部署&#xff0c;直接上所有代码 #添加镜像 docker search minio docker p…

怎么给电子文档批量盖骑缝章或公章?

怎么给电子文档批量盖骑缝章或公章?假如你有100个PDF电子文档要同时盖缝章&#xff0c;如果不借助专业的盖电子骑缝章软件&#xff0c;还真不好干。下面讲述如何利用e-章宝批量盖电子骑缝章。 1.在软件中导入待批量盖章的PDF文件 如下图&#xff0c;在“待盖章PDF文件”区域…

谨慎投稿!这本EI期刊正在被“劫持”!

Journsl ofTisniin lniversity Seience and Technology《天津大学学报&#xff08;自然科学与工程技术版&#xff09;》创刊于l955年&#xff0c;月刊&#xff0c;全国核心期刊&#xff0c;天津市一级期刊。该刊是由天津大学主办的综合性学术刊物&#xff0c;主要刊登自然科学和…

这款拖拽式大屏设计神器,太惊艳了!收藏吧!

概念​ 可视化大屏是当今信息时代的一种重要技术工具&#xff0c;它以大屏幕为显示终端&#xff0c;通过图形、图表、地图等形式将大量数据和信息直观地呈现出来&#xff0c;帮助用户更好地理解和分析数据。 JVS智能BI的可视化大屏从界面布局、色彩搭配&#xff0c;到图表类型…