本文介绍了三种在Tomcat服务器上实现图片上传的方法。第一种方法是直接修改上传路径至Tomcat目录；第二种方法是更改IDEA项目的输出路径至Tomcat的webapps文件夹；第三种方法则涉及配置虚拟路径。此外，还提供了使用layui上传图片的示例代码及返回JSON数据类型的注意事项。
目录
我的tomcat是放在E:\liulanqi\apache-tomcat-9.0.62\webapps
第一种解决方法：
将上传的图片路径改为上到到tomcat目录下的文件：
File file = new File("E:\\liulanqi\\apache-tomcat-9.0.62\\webapps\\assets\\img\\head\\" + newFileName);//路径改成自己服务器存放图片的路径，如果是本机的直接写磁盘路径，远程服务器的话最好研究一下ftp的协议，这个方法一样，就是要多一个类进行远程接口调用
session.setAttribute("picture",newFileName);
<img id="image" src="./assets/img/head/<%=request.getAttribute("picture")%>" alt="" />z注意：如何返回json文件
新建一个实体类Json，如何创建实体类来加入数据，
package com.lingnan.pojo;
import lombok.Data;
import java.util.Map;
@Data
public class DataJson {
private Integer code;
private String msg;
private Map<String,String> data;
}
DataJson dataJson = new DataJson();
//新建实体类加入数据
dataJson.setCode(1);
dataJson.setMsg("OK");
HashMap<String, String> map = new HashMap<>();
map.put("src","http://localhost:9095/assets/img/head/"+newFileName);
dataJson.setData(map);
String resJSON = JSON.toJSONString(dataJson);//关键步骤转换
System.out.println(resJSON);
PrintWriter writer = response.getWriter();
writer.println(resJSON);//提供给网页这样子就可以获取本地图片
第二种解决方法：
把idea项目的输出改为tomcat下面的webapps文件，
第三种方法：配置虚拟路径，不建议尝试
上传图片的工具类
package com.lingnan.servlet;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.alibaba.fastjson.JSON;
import com.lingnan.dao.impl.NewsUsersDaoImpl;
import com.lingnan.pojo.DataJson;
import com.lingnan.pojo.NewsUsers;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Servlet implementation class UploadImgServlet
*/
@WebServlet("/UploadImgServlet")
public class UploadImgServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 判断上传表单是否为multipart/form-data类型
HttpSession session = request.getSession();
NewsUsersDaoImpl newsUsersDao = new NewsUsersDaoImpl();
//String username = session.getAttribute("username"); // 在登录时将 User 对象放入了 会话
// 中
if (ServletFileUpload.isMultipartContent(request)) {
try {
// 1. 创建DiskFileItemFactory对象，设置缓冲区大小和临时文件目录
DiskFileItemFactory factory = new DiskFileItemFactory();
// System.out.println(System.getProperty("java.io.tmpdir"));//默认临时文件夹
// 2. 创建ServletFileUpload对象，并设置上传文件的大小限制。
ServletFileUpload sfu = new ServletFileUpload(factory);
sfu.setSizeMax(10 * 1024 * 1024);// 以byte为单位 不能超过10M 1024byte =
// 1kb 1024kb=1M 1024M = 1G
sfu.setHeaderEncoding("utf-8");
// 3.
// 调用ServletFileUpload.parseRequest方法解析request对象，得到一个保存了所有上传内容的List对象。
@SuppressWarnings("unchecked")
List<FileItem> fileItemList = sfu.parseRequest(request);
Iterator<FileItem> fileItems = fileItemList.iterator();
// 4. 遍历list，每迭代一个FileItem对象，调用其isFormField方法判断是否是上传文件
while (fileItems.hasNext()) {
FileItem fileItem = fileItems.next();
// 普通表单元素
if (fileItem.isFormField()) {
String name = fileItem.getFieldName();// name属性值
String value = fileItem.getString("utf-8");// name对应的value值
System.out.println(name + " = " + value);
}
// <input type="file">的上传文件的元素
else {
String fileName = fileItem.getName();// 文件名称
//System.out.println("原文件名：" + fileName);// Koala.jpg
String suffix = fileName.substring(fileName.lastIndexOf('.'));
//System.out.println("扩展名：" + suffix);// .jpg
// 新文件名（唯一）
String newFileName = new Date().getTime() + suffix;
//System.out.println("新文件名：" + newFileName);// image\1478509873038.jpg
String user_img = "img/"+newFileName;//插入数据库url
// 5. 调用FileItem的write()方法，写入文件
// File file = new File("D:\\springboot\\NewsProject\\src\\main\\webapp\\assets\\img\\head\\" + newFileName);//路径改成自己服务器存放图片的路径，如果是本机的直接写磁盘路径，远程服务器的话最好研究一下ftp的协议，这个方法一样，就是要多一个类进行远程接口调用
//上传到tocat
File file = new File("E:\\liulanqi\\apache-tomcat-9.0.62\\webapps\\assets\\img\\head\\" + newFileName);//路径改成自己服务器存放图片的路径，如果是本机的直接写磁盘路径，远程服务器的话最好研究一下ftp的协议，这个方法一样，就是要多一个类进行远程接口调用
File file2 = new File("D:\\springboot\\NewsProject\\src\\main\\webapp\\assets\\img\\head\\" + newFileName);//路径改成自己服务器存放图片的路径，如果是本机的直接写磁盘路径，远程服务器的话最好研究一下ftp的协议，这个方法一样，就是要多一个类进行远程接口调用
System.out.println(file.getAbsolutePath());
System.out.println(newFileName);//打印图片后面的名字
new NewsUsersDaoImpl().updateMessage(newFileName, (String) session.getAttribute("username"));
fileItem.write(file);
// DataJson dataJson = new DataJson();
// dataJson.setCode(1);
// dataJson.setMsg("上传成功");
// HashMap<String, String> map = new HashMap<>();
// map.put("src","http://localhost:9095/assets/img/head/"+newFileName);
//// response.getWriter().print(dataJson);
// System.out.println(dataJson);
// PrintWriter out = response.getWriter();
// out.print(dataJson);
// 6. 调用FileItem的delete()方法，删除临时文件
fileItem.delete();
DataJson dataJson = new DataJson();
dataJson.setCode(1);
dataJson.setMsg("OK");
HashMap<String, String> map = new HashMap<>();
map.put("src","http://localhost:9095/assets/img/head/"+newFileName);
dataJson.setData(map);
String resJSON = JSON.toJSONString(dataJson);
System.out.println(resJSON);
PrintWriter writer = response.getWriter();
writer.println(resJSON);
// List<NewsUsers> list = newsUsersDao.queryMessage((String) session.getAttribute("username"));
//
session.setAttribute("picture",newFileName);
// request.getRequestDispatcher("info.jsp").forward(request,response);
}
}
} catch (FileUploadException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
layui上传图片，主要是看img和js
如果报上传接口错误，就是因为你没有返回的数据类型是json数据类型。
<%@ page import="com.lingnan.pojo.NewsUsers" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.util.List" %>
<%@ page import="com.lingnan.dao.impl.NewsUsersDaoImpl" %>
<%--
Created by IntelliJ IDEA.
User: 86159
Date: 2022/7/1
Time: 20:17
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<%-- <link rel="shortcut icon" href="#" />--%>
<meta charset="utf-8">
<title>设置我的资料</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>
<%
List<NewsUsers> allstaff = new NewsUsersDaoImpl().queryMessage((String) session.getAttribute("username"));
// List<NewsUsers> allstaff = (List<NewsUsers>) session.getAttribute("allmessage");
Iterator<NewsUsers> iterator = allstaff.iterator();
NewsUsers users = new NewsUsers();
System.out.println(allstaff);
while (iterator.hasNext()){
users = iterator.next();
%>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">设置我的资料</div>
<div class="layui-card-body" pad15>
<form action="/mymessage" method="get" >
<div class="layui-form" lay-filter="">
<%-- 隐藏表单--%>
<input type="hidden" name="action" value="basemessage">
<div class="layui-form-item">
<label class="layui-form-label">头像</label>
<div class="layui-input-inline">
<img id="image" src="./assets/img/head/<%=request.getAttribute("picture")%>" alt="" />
<%-- <input type="image" src="http://localhost:9095/assets/img/head/<%= users.getUImg()%>" style="height: 20%;width: 50%">--%>
<%-- <img id="image" src="http://localhost:9095/assets/img/head/<%= users.getUImg()%>" >--%>
<%-- <img src="https://s3.bmp.ovh/imgs/2022/07/01/322b6745ab750dd9.jpg" style="width: 50%;height: 20%">--%>
<%-- <input name="avatar" lay-verify="required" id="LAY_avatarSrc" placeholder="图片地址" value="http://cdn.layui.com/avatar/168.jpg" class="layui-input">--%>
</div>
<div class="layui-input-inline layui-btn-container" style="width: auto;">
<%-- <button type="button" class="layui-btn layui-btn-primary" id="LAY_avatarUpload">--%>
<button type="button" class="layui-btn layui-btn-primary" id="upload-button">
<i class="layui-icon"></i>更换头像
</button>
<%-- <img id="image" src="">--%>
<%-- <button class="layui-btn layui-btn-primary" layadmin-event="avartatPreview">查看图片</button >--%>
</div>
</div>
<%-- <div class="layui-form-item">--%>
<%-- <label class="layui-form-label">我的角色</label>--%>
<%-- <div class="layui-input-inline">--%>
<%-- <select name="role" lay-verify="">--%>
<%-- <option value="1" selected>超级管理员</option>--%>
<%-- <option value="2" disabled>普通管理员</option>--%>
<%-- <option value="3" disabled>审核员</option>--%>
<%-- <option value="4" disabled>编辑人员</option>--%>
<%-- </select>--%>
<%-- </div>--%>
<%-- <div class="layui-form-mid layui-word-aux">当前角色不可更改为其它角色</div>--%>
<%-- </div>--%>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="username" value="<%= users.getUUsername()%>" readonly class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">不可修改</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">昵称</label>
<div class="layui-input-inline">
<input type="text" name="name" value="<%= users.getUName()%>" lay-verify="nickname" autocomplete="off" placeholder="请输入昵称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<%-- <input type="radio" name="sex" value="男" title="男">--%>
<%-- <input type="radio" name="sex" value="女" title="女" checked>--%>
<select id="select2" name="sex" class="layui-input" >
<option value="<%=users.getUSex()%>"><%=users.getUSex()%></option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年龄</label>
<div class="layui-input-inline">
<input type="text" name="age" value="<%=users.getUAge()%>" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机</label>
<div class="layui-input-inline">
<input type="text" name="phone" value="<%=users.getUPhone()%>" lay-verify="phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">注册时间</label>
<div class="layui-input-inline">
<input type="text" name="text" value="<%=users.getUCreatedate()%>" lay-verify="<%=users.getUCreatedate()%>" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">家庭地址</label>
<div class="layui-input-block">
<textarea name="remarks" placeholder="<%=users.getURemark()%>" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="submit" value="确认修改" class="layui-btn">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="addStudent" data-type="submit" >确认修改</button>
<%-- <button class="layui-btn" lay-submit lay-filter="setmyinfo">确认修改</button>--%>
<button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<%
}
%>
<script src="../../../layuiadmin/layui/layui.js"></script>
<script src="../../../assets/js/jquery.js"></script>
<script>
//如果你要用layui提供的from，这部分必须写上
//Demo
layui.use('form', function(){
let form = layui.form;
let $ =layui.$
//提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
layui.use('upload', function(){
let upload = layui.upload;
let $ = layui.$;
//执行实例
let uploadInst = upload.render({
elem: '#upload-button' //绑定元素
,url: '/UploadImgServlet' //上传接口
,done: function(res){
if (res.code==1){
//成功了
layer.msg(res.msg)
//首先获得我们上传之后的图片访问路径
console.log(res.data.src)
let imagePath = res.data.src;
// $("#image").attr("src",imagePath);
}
else {
layer.msg(res.msg)
}
//上传完毕回调
}
,error: function(){
//请求异常回调
}
});
});
// layui.config({
// base: '../../../layuiadmin/' //静态资源所在路径
// }).extend({
// index: 'lib/index' //主入口模块
// }).use(['index', 'set']);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
