springmvc 整合 layui 实现图片上传 以及 springmvc 图片上传后需要重启服务器才能访问图片的问题-解决方案
[ 上传图片后需要重启服务器才能访问图片的解决方案在最下方 -> ]
话不多说直接上代码 ->
第一步：导入相关 pom.xml 依赖 ->
<!--fileupload-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.2</version>
</dependency>
<!--JSONObejct依赖导入-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.28</version>
</dependency>第二步：配置好 web.xml 文件 ->
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
<!-- StandardServletMultipartResolvershu属性配置 -->
<multipart-config>
<max-file-size>20848820</max-file-size>
<max-request-size>418018841</max-request-size>
<file-size-threshold>1048576</file-size-threshold>
</multipart-config>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
第三步：在自己的 spring-mvc.xml 文件中 添加以下配置代码 ->
<!--文件解析器-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"></property>
<property name="maxUploadSize" value="5400000"></property>
</bean>
<mvc:annotation-driven>
<mvc:message-converters register-defaults="false">
<!-- 避免IE执行AJAX时,返回JSON出现下载文件 -->
<bean id="fastJsonHttpMessageConverter" class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<!-- 这里顺序不能反，一定先写text/html,不然ie下出现下载提示 -->
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
</list>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>第四步：导入 layui.js 和 layui.css [ 这两个文件按照自己的位置导入 ] -> 写好前端 PicUpload.html 文件 [ 上传的接口 url -> 记得改成自己的 ] ->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="static/layui/layui.js"></script>
<meta charset="UTF-8">
<title>图片上传</title>
<link rel="stylesheet" href="static/layui/css/layui.css" />
</head>
<body>
<button type="button" class="layui-btn" id="uploadScriptPic">
<i class="layui-icon"></i>上传图片
</button>
<input name="pic" id="image_hidden_area" value="" type="hidden" />
<script>
layui.use('upload', function(){
var upload = layui.upload;
var $ = layui.$;
//执行实例
var uploadInst = upload.render({
elem: '#uploadScriptPic' //绑定元素
,url: '/fileManager/picUpload' //记得改成自己的上传接口
,done: function(res){
//成功了
if(res.code == 200) {
layer.msg(res.msg)
var fileName = res.data.src; //获取图片名
$("#image_hidden_area").attr("value",fileName); //将图片名放到form表单的隐藏域中，方便表单提交并存入数据库
}else {
//失败了
layer.msg(res.msg)
}
}
,error: function(){
//请求异常回调
}
});
});
</script>
</body>
</html>第五步：写好一个图片上传工具类 PicUploadUtil.java ->
package com.hkl.util;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
//写一个上传的工具类
public class PicUploadUtil {
//定义一个目标路径，就是我们要把图片上传到的位置
private static final String BASE_PATH="D:\\springproject\\demo\\springboot-project-001\\fileupload-project\\src\\main\\resources\\static\\image\\";
public static String fileUpLoad(MultipartFile file) {
//获得上传文件的名称
String filename = file.getOriginalFilename();
//为了保证图片在服务器中名字的唯一性，这个是我呢要用UUID来对filename进行改写
String uuid = UUID.randomUUID().toString().replace("_","");
//将生成的UIDD和filename进行拼接
String newFilename = uuid+"_"+filename;
//创建一个文件实例对象
File image = new File(BASE_PATH, newFilename);
//对这个文件进行上传操作
try {
file.transferTo(image);
} catch (IOException e) {
return null;
}
return newFilename;
}
}第六步：写好一个 PicUploadController.java 文件 ->
package com.hkl.controller;
import com.alibaba.fastjson.JSONObject;
import com.hkl.utils.PicUploadUtil;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("/fileManager")
public class PicUploadController {
//图片上传
@ResponseBody
@RequestMapping("/picUpload")
public JSONObject picUpload(MultipartFile file) {
String imageName = PicUploadUtil.fileUpLoad(file);
JSONObject dataJson = new JSONObject();
Map<String,String> map = new HashMap();
//上传成功
if(imageName != null) {
dataJson.put("code",200);
dataJson.put("msg","上传成功");
map.put("src",imageName);
dataJson.put("data",map);
}
else {
dataJson.put("code",0);
dataJson.put("msg","对不起，上传失败");
}
return dataJson;
}
}
第七步：测试图片上传 -> 上传成功~
但是我们会发现 - > 虽然图片上传成功了，却需要重启服务器，前端才能访问到该图片资源；
这是因为 -> spring 启动后会将项目资源打包，但我们在运行中添加的照片并不会放在打包的资源里面，所以访问不到图片；而在重新启动项目后，又重新将资源打包，其中就包含了新加入的照片，所以可以访问；
我这里提供一种解决方式 -> 使用 IDEA 设置 虚拟路径；
第一步：打开 IDEA 中 Edit Configurations... -> Deployment -> + -> External Source.. -> 选择自己图片上传保存的文件夹、点击OK -> 最后 Appliy -> OK 即可
第二步： 通过 [ localhost:8080/image/图片全称 ] 即可访问到本地文件夹 image 中的图片[ 8080 端口号改成自己项目的，image 文件夹改成自己文件夹的名称 ]
[ 因为这里是直接访问本地的文件夹，不需要从打包的资源里访问；所以不需要重启服务器，可以在上传图片后直接访问刚刚上传的图片； ]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
