SpringBoot上传图片的示例
说明：通常项目中，如果图片比较多的话，都会把图片放在专门的服务器上，而不会直接把图片放在业务代码所在的服务器上。下面的例子只是为了学习基本流程，所以放在了本地。
1、单张图片上传
1.1、前端用表单提交
前端代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="post" action="/uploads" enctype="multipart/form-data"> <input type="file" name="files" multiple> <input type="submit" value="上传"> </form> </body> </html>
后端代码;
SimpleDateFormat formatter = new SimpleDateFormat("/yyyy/MM/dd/");
@RequestMapping("/upload")
public String fileUpload(MultipartFile file, HttpServletRequest request){
String time = formatter.format(new Date());
//图片上传服务器后所在的文件夹
String realPath = request.getServletContext().getRealPath("/img") + time;
File folder = new File(realPath);
if(!folder.exists())
folder.mkdirs();
//通常需要修改图片的名字（防止重复）
String oldName = file.getOriginalFilename();
String newName = UUID.randomUUID() + oldName.substring(oldName.lastIndexOf("."));
try {
//将文件放到目标文件夹
file.transferTo(new File(folder, newName));
//通常还需要返回图片的URL，为了通用性，需要动态获取协议，不要固定写死
String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/img" + time + newName;
return returnUrl;
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
1.2、前端用ajax提交
前端代码与上面的略有不同，后台代码是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" id="file">
<input type="submit" value="上传" onclick="uploadFile()">
<h1 id="result"></h1>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
function uploadFile() {
var file = $("#file")[0].files[0];
var formData = new FormData();
formData.append("file", file);
$.ajax({
type:"post",
url:"/upload",
processData:false,
contentType:false,
data:formData,
success:function (msg) {
$("#result").html(msg);
}
})
}
</script>
</html>
2、多个图片上传
前端代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="post" action="/uploads" enctype="multipart/form-data"> <input type="file" name="files" multiple> <input type="submit" value="上传"> </form> </body> </html>
后台代码：
@RequestMapping("/uploads")
public String fileUploads(MultipartFile[]files, HttpServletRequest request){
String time = formatter.format(new Date());
//图片上传服务器后所在的文件夹
String realPath = request.getServletContext().getRealPath("/img") + time;
File folder = new File(realPath);
if(!folder.exists())
folder.mkdirs();
for (MultipartFile file : files) {
//通常需要修改图片的名字（防止重复）
String oldName = file.getOriginalFilename();
String newName = UUID.randomUUID() + oldName.substring(oldName.lastIndexOf("."));
try {
//将文件放到目标文件夹
file.transferTo(new File(folder, newName));
//通常还需要返回图片的URL，为了通用性，需要动态获取协议，不要固定写死
String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/img" + time + newName;
System.out.println(returnUrl);
} catch (IOException e) {
e.printStackTrace();
}
}
return null;
}
3、问题记录
在后台代码中，有一行需要注意下：
String realPath = request.getServletContext().getRealPath("/img") + time;
需要理解一下realPath究竟指的是什么。刚开始测试的时候，图片上传成功后，后台idea里找不到对应的图片，然后根据它返回的realPath，在C盘用户目录下的某个文件夹里找到了该图片（user/AppData/....）。
shift+shift 全局搜索 getCommonDocumentRoot这个方法，点进去，有个静态数组：COMMON_DOC_ROOTS
private static final String[] COMMON_DOC_ROOTS = new String[]{"src/main/webapp", "public", "static"};
发现默认是指webapp下，或者根目录下的public、static文件夹（与src并列）。然而这些目录都没有，所以Spring定向到了工程目录以外的一个位置。
于是我在根目录下新建一个static文件夹，再次上传，果然有效了。
以上就是SpringBoot上传图片的示例的详细内容，更多关于SpringBoot上传图片的资料请关注我们其它相关文章！
相关推荐
-
SpringBoot集成阿里云OSS图片上传
简述 最近做的公司项目,图片比较多,不想给其存储到自己服务器上,就买了阿里云的OSS服务器来哦进行存储,其实集成第三方平台,一般没什么难度,当然,你要仔细看对方的API文档,这篇主要说一下个人集成OSS的过程 步骤 1.pom.xml中添加OSS的SDK <!-- 图片上传 SDK 阿里云oss --> <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-os
-
基于SpringBoot实现图片上传与显示
本文为大家分享了SpringBoot实现图片上传与显示的具体代码,供大家参考,具体内容如下 SpringBoot实现图片上传与显示:Demo地址 效果图预览 思路 一般情况下都是将用户上传的图片放到服务器的某个文件夹中,然后将图片在服务器中的路径存入数据库.本Demo也是这样做的. 由于用户自己保存的图片文件名可能跟其他用户同名造成冲突,因此本Demo选择了使用UUID来生成随机的文件名解决冲突. 但是本Demo不涉及任何有关数据库的操作,便于演示,就用原来的文件名. 步骤 pom相关依赖 基于
-
SpringBoot图片上传和访问路径映射
简介 做移动端对接,框架用的SpringBoot,接口RESTful,实现一个图片上传功能,图片上传是个经典的应用场景了,完成后,做个笔记记录一下,希望能帮到攻城狮们 开发步骤 1.先贴图片上传工具类 package com.prereadweb.utils; import java.io.File; import java.io.FileOutputStream; import java.util.UUID; /** * @Description: 文件工具类 * @author: Yangx
-
如何解决SpringBoot集成百度UEditor图片上传后直接访问404
SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传之后直接访问并不能被访问到,必须重新加载项目. 首先分析一下原因: 我们知道,如果使用类似 /upload/image/1.jpg 这种格式进行图片的访问的时候,SpringBoot读取的并不是本项目中直接的静态目录,而是在进行编译的时候生成target目录下的文件,如下图所示: 那么问题就来了,我们在运行的过程中上传一个图片的话,并不能重新加载当前这个项目
-
SpringBoot如何上传图片
1.前端准备 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
-
vue+springboot图片上传和显示的示例代码
一.前言 在使用spring boot做后台系统,vue做前端系统,给客户开发一套系统时候,其中用到了图片上传和显示的功能. 二.环境 前端:vue 前端组件:tinymce 后台:spring boot:2.2.3 三.正文 在客户开发一套门户管理系统时,集成了tinymce组件,用于编辑内容,springboot不同于其他项目. 是集成tomcat的,文件和图片是不能直接访问的.所以我在做集成富文本编辑器时,需要处理图片的问题. 这个问题跟上传头像等显示图片的功能是类似的.下面记录详情步骤
-
SpringBoot限制文件或图片上传大小的两种配置方法
今天做图片上传时候,报了如下错:服务运行异常,Could not parse multipart servlet request; nested exception is java.lang.IllegalStateException: org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted
-
详解SpringBoot上传图片到阿里云的OSS对象存储中
启动idea创建一个SpringBoot项目 将上面的步骤完成之后,点击下一步创建项目 创建完成之后修改pom.xml文件,添加阿里云oss依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional&g
-
SpringBoot上传图片的示例
说明:通常项目中,如果图片比较多的话,都会把图片放在专门的服务器上,而不会直接把图片放在业务代码所在的服务器上.下面的例子只是为了学习基本流程,所以放在了本地. 1.单张图片上传 1.1.前端用表单提交 前端代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </he
-
SpringBoot使用OpenCV示例总结
前言 最近有个项目需要对图片图像进行处理,使用到了开源框架OpenCV全称是Open Source Computer Vision Library,是一个跨平台的计算机视觉库:而现在的项目都是基于SpringBoot,需要把OpenCv整合进去,下面把在使用中遇到的问题进行一个汇总整理. 下载安装 Opencv官网提供了一个多个平台的版本包括:Windows,IOS,Android,地址如下:opencv.org/releases/:因为开发在Windows平台,发布在Linux平台,所以我们这
-
springboot上传图片文件步骤详解
步骤一:基于前面springboot入门小demo 基于的springboot入门小demo,已包含了前面文章的知识点(比如:热部署.全局异常处理器). 步骤二:创建uploadPage.jsp上传页面 在jsp目录下新建uploadPage.jsp,需要几点: 1. method="post" 是必须的 2. enctype="multipart/form-data" 是必须的,表示提交二进制文件 3. name="file" 是必须的,和后续
-
解决springboot上传图片后无法立即访问需重启的问题
1)创建配置类实现 WebMvcConfigurer 2)重写addResourceHandlers 方法进行设置 说明:/images/** images 为相对路径 即resources/static 目录下的静态资源 images为存放图片的目录 file:D:\code\java\work\transpond-friends-circle\src\main\resources\static\images\ 该路径为绝对路径 即你在电脑打开该图片文件夹的路径 到此这篇关于解决springb
-
C#调用HTTP POST请求上传图片的示例代码
现在很多B/S系统的开发都是通过API方式来进行的,一般服务端会开放一个API接口,客户端调用API接口来实现图片或文件上传的功能. GET和POST是什么?HTTP协议中的两种发送请求的方法. HTTP是什么?HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议. HTTP的底层是TCP/IP.所以GET和POST的底层也是TCP/IP,也就是说,GET/POST都是TCP链接.GET和POST能做的事情是一样一样的.你要给GET加上request body,给POST带上url参
-
Android 使用腾讯X5浏览器上传图片的示例
目录 1.文件选择 2.实现文件单选 3.举个例子 这几天在客户端接入一个Web页的客服系统,用来接受用户的反馈和建议.Android客户端集成这个客服H5之后,图片死活传递不上去.看了一下iOS同事的集成效果,可以自由上传图片,再把H5的地址用Android原生浏览器打开,也可以正常打开相册上传图片. What??? 见鬼了, 气抖冷!!! 看了一些博客,使用Android的WebView在默认情况下是不能够支持上传文件的(需要重写 onShowFileChooser方法).那就只能撸起袖子自
-
SpringBoot上传图片到指定位置并返回URL的实现
目录 需求 前端部分(ElementUI+Vue.js) 后端部分(SpringBoot) 1.先配置application.yml文件 2.映射资源-重写WebMvcConfigurer接口,实现对资源的映射 3.Controller代码 想做一个上传图片的功能,来展示用户上传的图片. 在返回给前端的URL上弄了好久,前端一直无法访问到URL,结果一直显示404. 倒腾了一上午发现是 文件路径映射的问题,后端部分有讲解决办法,可供大家参考 需求 前端的图片上传到服务器指定的文件目录,并且将UR
-
SpringBoot集成MQTT示例详解
目录 引言 MQTT 特点 Apache-Apollo 下载 配置与启动 SpringBoot2的开发 添加依赖 自定义配置 配置MQTT发布和订阅 消息发布器 发送消息 入口类 引言 特别提醒: 文中提到的MQTT服务器Apache-Apollo,现在已经不维护.但是客户端的写法是通用的.目前我常用的是RabbitMQ加mqtt插件. MQTT MQTT(消息队列遥测传输)是ISO标准(ISO/IEC PRF 20922)下基于发布/订阅范式的消息协议.它工作在 TCP/IP协议族上,是为硬件
-
springboot bootcdn使用示例详解
应用:直接使用bootcdn提供的静态资源,不需要本地存储 bootcdn 官网:https://www.bootcdn.cn/ staticfile cdn官网: http://www.staticfile.org/ 常用静态资源 # layui.js https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js # layui.