SSM和Layui进行简单的图片上传

最新推荐文章于 2023-11-25 14:25:09 发布

是阿伟咯

最新推荐文章于 2023-11-25 14:25:09 发布

阅读量538

点赞数

文章标签： layui json javascript spring

本文链接：https://blog.csdn.net/weixin_58415189/article/details/126651428

版权

SSM和Layui实现简单上传图片

今天写大作业时，突然想添加一个对用户头像进行上传的功能，看了网上的教程，自己简单地写了出来，遇到了一些bug，最终解决了，记录一下，以便回忆。

导入依赖

  <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.6</version>
    </dependency>
<!--    JAVA JSON使用-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.47</version>
    </dependency>

前端代码

注意点： url添加后台的接口，accpet用来选择接口

<%--
  Created by IntelliJ IDEA.
  User: 夜空
  Date: 2022/8/30
  Time: 21:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.7.6/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui-v2.7.6/layui/layui.js"></script>
</head>
<body>
<%--<form action="${pageContext.request.contextPath}/sf" method="post" enctype="multipart/form-data">--%>

<%--    上传头像<input type="file" name="myfile"><br>--%>
<%--    <input type="submit" value="提交">--%>
<%--    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>--%>
<%--</form>--%>
<button type="button" class="layui-btn" id="test1">
    <i class="layui-icon">&#xe67c;</i>上传头像
</button>
<script>
    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' ,//绑定元素
            url: '${pageContext.request.contextPath}/sf', //上传接口
            accept:'images',
            field: "myfile",
            done: function(res){
                console.log(res);
                alert("上传成功")
                //上传完毕回调
            }
            ,error: function(){
                alert("上传失败");
                //请求异常回调
            }
        });
    });
</script>
</body>
</html>

后端代码

@Controller
public class FileController {
    @RequestMapping("sf")
    @ResponseBody
    public JSONObject sf(MultipartFile myfile, HttpServletRequest request) throws Exception
    {
        if(!myfile.isEmpty())
        {
//            得到文件存储路径
            String realPath=request.getServletContext().getRealPath("image");
//          getOriginalFilename  得到文件名
            String fileName=myfile.getOriginalFilename();
            System.out.println(realPath);
            File f=new File(realPath,fileName);
//            判断目录是否存在
            if(!f.exists())
            {
//                创建目录
                f.mkdirs();
            }
//            transferTO将myfile内容写入到f目录中去
            myfile.transferTo(f);
            System.out.println("成功");
//            因为layui官方文档中说明需要返回规定的JSON数据，不按预定返回可以运行，但是会提示错误信息
            JSONObject obj=new JSONObject();
            JSONObject obj2=new JSONObject();
            obj.put("int",200);
            obj.put("String","上传成功");
            obj2.put("src",realPath+"/"+myfile.getOriginalFilename());
            obj.put("data",obj2);
            return obj;
        }
        else
        {
            System.out.println("请选择要上传的文件");
            JSONObject obj=new JSONObject();
            obj.put("int", 200);
            obj.put("String", "上传失败");
            obj.put("data", null);
            return obj;
        }
    }

Layui官网文档规定，后端接口需要严格返回规定JSON格式的数据
在这里插入图片描述如果不返回的话，程序依然可以运行，只是会出现弹窗报错。

配置文件

maxUploadSize 规定最大的可以上传多少m的图片

<!--    实现文件解析器的配置-->
    <bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <property name="maxUploadSize" value="10485760"/>
            <property name="defaultEncoding" value="UTF-8"/>
    </bean>

如果像我一样使用JSONObject进行返回JSON数据，需要配置以下代码，如果没有也会发生弹窗错误。

    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <!-- 配置Fastjson支持 -->
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                <property name="supportedMediaTypes">
                    <list>
                        <value>application/json</value>
                        <value>text/html;charset=UTF-8</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

程序测试

在这里插入图片描述
出现JSON打印信息

文件夹中出现图片

是阿伟咯

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫