spring boot2.0图片上传至本地或服务器并配置虚拟路径的方法

最近写了关于图片上传至本地文件夹或服务器，上传路径到数据库，并在上传时预览图片。使用到的工具如下：

框架：spring boot 2.0

前端模板：thymeleaf

图片预览：js

首先，上传以及预览，js以及<input type="file">，以及预览图片的JS

function Img(obj){
 var imgFile = obj.files[0];
 console.log(imgFile);
 var img = new Image();
 var fr = new FileReader();
 fr.onload = function(){
 $('#img').attr('src',fr.result);
 }
 fr.readAsDataURL(imgFile);
}
<input type="file" name="url" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" style="opacity:1" onchange="Img(this)"/>

效果如图所示：

后台获取图片 将文件存入本地文件夹，这里要提一下，文件存放和将路径放进数据库比较简单，可以查找资料，这里不放代码了。主要讲解一下配置虚拟路径：

为什么要配置虚拟路径呢？如果不配置虚拟路径直接访问本地文件夹或服务器上的文件或图片信息，会报错Not allowed to load local resource，因为浏览器为了安全，不允许加载本地文件。

registry.addResourceHandler("/images/**").addResourceLocations("file:/C:/Users/ASUS/Desktop/file/");

首先解释一下，"/images/**" 虚拟路径，

位于static静态文件下，file:/C:/Users/ASUS/Desktop/file/   ，C:/Users/ASUS/Desktop/file/ 指本地图片存储文件夹，如果是服务器，则改成对应文件夹即可，这里是代码配置静态文件，也可以直接在.properties文件里配置。

这里有一个问题file:/C:/Users/ASUS/Desktop/file/的写法存在差异，有的需要file:///C:/Users/ASUS/Desktop/file/，具体原因不清楚，记录下来，存入数据库的路径为/images/+"图片名"

最后看下最后的效果图：

总结

以上所述是小编给大家介绍的spring boot2.0图片上传至本地或服务器并配置虚拟路径的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • SpringBoot实现文件上传下载功能小结

    最近做的一个项目涉及到文件上传与下载.前端上传采用百度webUploader插件.有关该插件的使用方法还在研究中,日后整理再记录.本文主要介绍SpringBoot后台对文件上传与下载的处理. 单文件上传 // 单文件上传 @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestParam("file") MultipartFile file) { try { if (

  • springboot添加https服务器的方法

    什么是https 要说https我们得先说SSL(Secure Sockets Layer,安全套接层),这是一种为网络通信提供安全及数据完整性的一种安全协议,SSL在网络传输层对网络连接进行加密.SSL协议可以分为两层:SSL记录协议(SSL Record Protocol),它建立在可靠的传输协议如TCP之上,为高层协议提供数据封装.压缩.加密等基本功能支持:SSL握手协议(SSL Handshake Protocol),它建立在SSL记录协议之上,用于在实际数据传输开始之前,通信双方进行身

  • 基于SpringBoot实现图片上传与显示

    基于SpringBoot实现图片上传与显示

    本文为大家分享了SpringBoot实现图片上传与显示的具体代码,供大家参考,具体内容如下 SpringBoot实现图片上传与显示:Demo地址 效果图预览 思路 一般情况下都是将用户上传的图片放到服务器的某个文件夹中,然后将图片在服务器中的路径存入数据库.本Demo也是这样做的. 由于用户自己保存的图片文件名可能跟其他用户同名造成冲突,因此本Demo选择了使用UUID来生成随机的文件名解决冲突. 但是本Demo不涉及任何有关数据库的操作,便于演示,就用原来的文件名. 步骤 pom相关依赖 基于

  • 解决springboot MultipartFile文件上传遇到的问题

    1.ajax传过去的参数在controller接受不到 解决:在contoller中增加@RequestParam 例如:saveUploadFile( @RequestParam("file") MultipartFile file,HttpServletRequest request) 2.org.springframework.web.multipart.support.MissingServletRequestPartException: Required request pa

  • springboot打包部署到linux服务器的方法

    1.由于springboot集成了tomcat,所以打包的时候不再使用war,而是使用jar <groupId>cn</groupId> <artifactId>back</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> 2.将springboot启动类添加继承SpringBootServletInitialize

  • 全面解析SpringBoot文件上传功能

    全面解析SpringBoot文件上传功能

    这些天忙着刷题,又怕遗忘了spring boot, 所以抽出一点时间折腾折腾,加深点印象. spring boot 的文件上传与 spring mvc 的文件上传基本一致,只需注意一些配置即可. 环境要求: Spring Boot v1.5.1.RELEASE + jdk1.7 + myeclipse 1).引入thymeleaf,支持页面跳转 <!-- 添加thymeleaf --> <dependency> <groupId>org.springframework.

  • SpringBoot上传文件到本服务器 目录与jar包同级问题

    前言 看标题好像很简单的样子,但是针对使用jar包发布SpringBoot项目就不一样了. 当你使用tomcat发布项目的时候,上传文件存放会变得非常简单,因为你可以随意操作项目路径下的资源.但是当你使用SpringBoot的jar包发布项目的时候,你会发现,你不能像以前一样操作文件了.当你使用File file = new File()的时候根本不知道这个路径怎么办.而且总不能很小的项目也给它构建一个文件服务器吧.所以这次就来解决这样的问题. 不想知道细节的,可以直接跳转到最后封装的部分,里面

  • Springboot上传excel并将表格数据导入或更新mySql数据库的过程

    本文主要描述,Springboot-mybatis框架下上传excel,并将之导入mysql数据库的过程,如果用户id已存在,则进行更新修改数据库中该项信息,由于用到的是前后端分离技术,这里记录的主要是后端java部分,通过与前端接口进行对接实现功能,使用layui等前端框架与之对接,也可以自己写前端代码,本文以Controller开始,从导入过程开始讲述,其中包括字典表的转换 1.在pom.xml文件中导入注解,主要利用POI <dependency> <groupId>org.

  • springboot 文件上传大小配置的方法

    springboot上传文件大小的配置我这里记录两种,一种是设置在配置文件里只有两行代码,一种是加个Bean 首先第一种: application.properties中添加 spring.http.multipart.maxFileSize=10Mb spring.http.multipart.maxRequestSize=10Mb maxFileSize 是单个文件大小 maxRequestSize是设置总上传的数据大小 这就可以了. 根据自己需求定义吧,Mb和Kb都可以,大小写也都随意,L

  • SpringBoot远程访问redis服务器问题剖析

    SpringBoot远程访问redis服务器问题剖析

    使用了SpringBoot的项目,在远程连接Redis服务器时,会遇倒一些小问题,这里剖析一下. 1.首先,要在pom文件中添加redis依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-redis</artifactId> </dependency> 2.接着要在项目的配置文件中添加对redis服务

  • SpringBoot文件上传控制及Java 获取和判断文件头信息

    SpringBoot文件上传控制及Java 获取和判断文件头信息

    之前在使用SpringBoot进行文件上传时,遇到了很多问题.于是在翻阅了很多的博文之后,总算将上传功能进行了相应的完善,便在这里记录下来,供自己以后查阅. 首先,是建立一个标准的SpringBoot 的工程,这里使用的IDE是Intellij Idea,为了方便配置,将默认的配置文件替换为了application.yml. 1.在index.html中进行文件上传功能,这里使用的文件上传方式是ajax,当然也可以按照自己的具体要求使用传统的表单文件上传. <!DOCTYPE html> &l

  • 基于SpringBoot上传任意文件功能的实现

    基于SpringBoot上传任意文件功能的实现

    一.pom文件依赖的添加 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</gr

随机推荐