springmvc 接收上传图片并且存储至本地目录

最新推荐文章于 2024-08-04 17:16:44 发布

weixin_34268310

最新推荐文章于 2024-08-04 17:16:44 发布

阅读量952

点赞数

文章标签： java 数据库测试

原文链接：https://segmentfault.com/a/1190000009597009

版权

序言：项目环境

本次简单的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();
        }
    }
}

想要了解更多开发技术，面试教程以及互联网公司内推，欢迎关注我的微信公众号！将会不定期的发放福利哦~

weixin_34268310

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
springmvc 接收上传图片并且存储至本地目录

序言：项目环境本次简单的demo是建立在springmvc框架上的，部署环境为tomcat，前段使用的bootstrap+jquery_file_upload组件。图片存储的方式为存储在虚拟目录下并返回虚拟目录的路径。建议先搭配好springmvc环境再继续参考本博客。没有搭配好环境的可以参考这篇博客图片存储方式在给出上传图片的代码...
复制链接

扫一扫