Layui 上传图片到磁盘上 + Tomcat 配置虚拟路径-CSDN博客

Layui 上传图片到磁盘上 + Tomcat 配置虚拟路径

Tomcat 配置虚拟路径

找到 eclipse 中 tomcat 下面的 server.xml 文件,在 Host 标签里面添加 <Context docBase="E:\upload\image\" path="/upload/image" reloadable="true"/>。
其中,docBase 表示的是图片的实际路径, path 表示的是图片的虚拟路径。

在项目根目录下面建立图片的访问路径,即 path 指向的是图片的虚拟路径,如下所示：

图片在磁盘上的实际保存地址如下：

数据库中存放图片的访问路径：

Layui 上传图片到磁盘上

index.jsp 文件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${webTitle}</title>
<link href="${pageContext.request.contextPath}/assets/images/suf.ico" rel="shortcut icon">
<link rel="stylesheet" href="${pageContext.request.contextPath}/assets/layui/css/layui.css" media="all">
</head>
<body>
    <h1>大家好，我来复习springmvc了</h1>
    <table class="layui-table">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>班级</th>
            </tr>
        </thead>
        <c:forEach items="${list}" var="student">
            <tr>
                <td>${student.sno }</td>
                <td>${student.sname }</td>
                <td>${student.age }</td>
                <td>${student.gender }</td>
                <td>${student.grade }</td>
            </tr>
        </c:forEach>
    </table>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>常规使用：普通图片上传</legend>
    </fieldset>
    <div class="layui-upload" style="margin-left: 300px;">
        <button type="button" class="layui-btn" id="upload_image_id">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" src="/${people.imagepath }" style="width: 300px; height: 300px;" id="image_display" />
        </div>
    </div>
    <script src="${pageContext.request.contextPath}/assets/layui/layui.js"></script>
    <script>
        layui.use('upload', function() {
            var $ = layui.jquery;
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem : '#upload_image_id', //绑定元素
                url : '${pageContext.request.contextPath}/student/imageUpload.do', //上传接口
                accept : 'images', // 图片
                multiple : false,
                exts : 'jpg|png|gif|bmp|jpeg|svg',
                auto : true,
                size : 5 * 1024,// 设置文件最大可允许上传的大小，单位 KB。不支持ie8/9
                method : 'post',
                before : function(obj) {
                    //预读本地文件示例,不支持ie8
                    obj.preview(function(index, file, result) {
                        // console.log(index); //得到文件索引
                        // console.log(file); //得到文件对象
                        // console.log(result); //得到文件base64编码，比如图片
                        $('#image_display').attr('src', result); //图片链接（base64）
                    });
                },
                done : function(res) {
                    //上传完毕回调
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败！');
                    }
                    //上传成功
                    if (res.code == 0 && res.row > 0) {
                        return layer.msg('上传成功！');
                    }
                },
                error : function() {
                    //请求异常回调
                    return layer.msg('上传出错！');
                }
            });
        });
    </script>
</body>
</html>

StudentInfoSelect.java 文件

package com.libin.springmvc.controller;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;

import com.libin.springmvc.entity.People;
import com.libin.springmvc.entity.Student;
import com.libin.springmvc.pub.PubConfig;
import com.libin.springmvc.service.PeopleService;
import com.libin.springmvc.service.StudentService;
import com.libin.springmvc.utils.WebUtil;

@RequestMapping("/student")
@Controller
public class StudentInfoSelect {

    @Resource
    private StudentService studentService;

    @Resource
    private PeopleService peopleService;

    @Autowired
    private PubConfig pubConfig;

    @RequestMapping("/info")
    public String studentInfo(Model model, Student student) {
        List<Student> list = studentService.findAllStudent();
        People peopleName = new People();
        peopleName.setName("Tom");
        People people = peopleService.getPeopleByName(peopleName);
        model.addAttribute("list", list);
        model.addAttribute("people", people);
        return "index";
    }

    @RequestMapping("/imageUpload")
    public void imageUpload(HttpServletRequest request, HttpServletResponse response, MultipartFile file) {
        Map<String, Object> dataMap = new HashMap<>();
        if (!file.isEmpty()) {
            try {
                // String contextPath = PropertiesUtil.getValue("imageUploadPath") + "\\image";
                String contextPath = pubConfig.getImageUploadPath() + "\\image";
                String img = uploadFile(file, contextPath);
                String imgPath = "upload/image/" + img;
                dataMap.put("code", 0);
                dataMap.put("image", imgPath);
                People people = new People();
                people.setName("Tom");
                people.setImagepath(imgPath);
                int row = peopleService.updatePeopleImage(people);
                dataMap.put("row", row);
            } catch (Exception e) {
                dataMap.put("code", 1);
                e.printStackTrace();
            }
        }
        WebUtil.responseOutWithJson(response, dataMap);
    }

    public static String uploadFile(MultipartFile file, String filePath) throws IllegalStateException, IOException {
        Random r = new Random();
        String name = file.getOriginalFilename(); // 文件的真实名称
        String fileName = getShortSystemTime() + r.nextInt(99999999) + "_" + name;
        File tempFile = new File(filePath, fileName);
        if (!tempFile.getParentFile().exists()) {
            tempFile.getParentFile().mkdirs();
        }
        if (tempFile.exists()) {
            tempFile.delete();
        }
        tempFile.createNewFile();
        file.transferTo(tempFile);
        return tempFile.getName();
    }

    public static String getShortSystemTime() {
        SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");// 设置日期格式
        return df.format(new Date()).toString();
    }

}