序言：项目环境
本次简单的demo是建立在springmvc框架上的，部署环境为tomcat，前段使用的bootstrap+jquery_file_upload组件。图片存储的方式为存储在虚拟目录下并返回虚拟目录的路径。建议先搭配好springmvc环境再继续参考本博客。没有搭配好环境的可以参考这篇博客
图片存储方式
在给出上传图片的代码之前，先讲解一下服务器接收图片上传的思路。服务器端保存图片一般有两种思路。
- 将图片以blob的格式存储在数据库中，仅适用于图片较小的场景
- 将图片存储在服务器的目录下，并在数据库中存储图片路径和访问URL，缺点是可能会造成服务器性能的下降
- 将图片存储在非服务器目录的任意路径下，在服务器中配置虚拟目录，通过虚拟目录访问图片目录下的图片
在这里我将主要讲一下如何实现第三种图片存储。
在开发环境中，可以直接使用Intellij来配置tomcat虚拟目录。因为Intellij管理下的tomcat实际上是一个tomcat虚拟映像，所以Intellij中的配置将不会影响实际tomcat中的配置。所以如果是在开发测试的过程中直接使用Intellij部署项目，请参考Intellij中配置虚拟目录。如果是将开发的war包直接部署在服务器中，则参考tomcat配置虚拟目录。
Intellij中配置虚拟目录
进入tomcat配置管理页面，点击deployment标签，然后点击左下角的加号选择‘external source’，并添加相应的虚拟目录所在的真实路径。最后在Application context中配置虚拟目录的访问路径。
Tomcat中配置虚拟目录
在tomcat中配置虚拟目录的方法有多种，详细介绍可以参考这两篇博客
http://www.cnblogs.com/love54...
https://my.oschina.net/liangz...
在这里 我想要介绍的方法是，在Catalina中配置单独的虚拟目录。
找到/TOMCAT_HOME/conf/Catalina/localhost文件夹，在该文件夹下新建一个xml文件，xml文件的文件名就是虚拟目录对应的访问路径名，如果需要多级目录，则用#分割开来，例如psm#pc.xml对应的访问路径就是/psm/pic。在该xml文件中配置虚拟目录，语法如下
<Context docBase="/users/rale/Documents/images" reloadable="false" ></Context>
reloadale是说如果其中发生变化，是否重新加载。在结束配置后，无需重启服务器就可以直接用该路径访问虚拟目录。
图片上传和接收
在前端，使用bootstrap和juery_file_upload插件进行图片上传，简单的html页面如下
<!DOCTYPE html>
<html>
...
<label for="cover"><img src=""></label>
<input type="file" id="cover" data-url="/psm/image/upload"/>
<%--ImageUpload--%>
<spring:url value="/resources/plugins/jQuery/jQuery-2.1.4.min.js" var="jquery_js"/>
<script src="${jquery_js}"></script>
<spring:url value="/resources/plugins/jQueryFileupload/js/vendor/jquery.ui.widget.js" var="jquery_ui_widget_js"/>
<spring:url value="/resources/plugins/jQueryFileupload/js/jquery.iframe-transport.js" var="jquery_iframe_transport_js"/>
<spring:url value="/resources/plugins/jQueryFileupload/js/jquery.fileupload.js" var="jquery_fileupload_js"/>
<script src="${jquery_ui_widget_js}"></script>
<script src="${jquery_iframe_transport_js}"></script>
<script src="${jquery_fileupload_js}"></script>
<!--使用jquery_file_upload插件-->
<script>
$(function () {
$('#cover').fileupload({
dataType: 'json',
done: function (e, data) {
if(data.result != null){
console.log(data.result.fileURL)
$('label[for="cover"] img').attr('src', data.result.fileURL)
}
},
});
});
</script>
</html>controller接收上传文件的请求，在这里可以参考这篇博客
java存储文件的代码如下，该方法将图片的字节流转换为文件并存储在相应的图片路径下，也就是我们之前配置的虚拟目录之下。
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;
/**
* Created by rale on 5/29/17.
* 将图片存储至本地
*/
public class FileUtil {
public static void save(byte[] bytes, String fileName, String path) throws IOException {
createDirectory(path);
FileOutputStream os = new FileOutputStream(path + fileName);
os.write(bytes);
os.close();
}
private static boolean isExistPath(String path) {
File file = new File(path);
if (file.exists()) {//判断文件目录的存在
return true;
}else{
return false;
}
}
private static void createDirectory(String path){
if(!isExistPath(path)){
File file=new File(path);
file.mkdirs();
}
}
}
想要了解更多开发技术，面试教程以及互联网公司内推，欢迎关注我的微信公众号！将会不定期的发放福利哦~
java
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。