spring boot2.0如何实现图片上传至本地或服务器并配置虚拟路径

这篇文章主要为大家展示了“spring boot2.0如何实现图片上传至本地或服务器并配置虚拟路径”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“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"  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如何实现图片上传至本地或服务器并配置虚拟路径”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！