layui上传图片，前端直接拷代码，后端……

柔情只为你懂 2022-11-14 11:48 438阅读 0赞

![1f50e68fee14b9a58085559d2502a729.png][]

大家好，我是雄雄，欢迎关注公众号【雄雄的小课堂】。

最近实在是忙的抽不开身，并且身上也出现了一堆的毛病，今天牙疼，明天脊椎疼，然后接着又头疼……年纪轻轻的，咋这么多毛病呢？我也在坚持锻炼呢……

今天给大家分享的是如何利用layui实现图片（文件）上传呢？

Layui是一款前端ui框架，这个框架最大的特点就是简单易学，我记得第一次用它的时候还在上学，就下载下来试了试，发现是真好用啊！

Layui里面所包含的组件，官方都已提供了代码示例，包括我今天所分享的上传文件以及图片，下面是上传图片的前端源代码：

效果如图所示：

![a8def30c4ecbee2983e335991daa9f78.png][]

点击“商品图片”，可在本地选择图片进行上传，效果如下：

![9fd27ac8e3989e72c59a8d5d6a1769d6.png][]

点击立即提交即可连同表单内容一并插入至数据库中。

前端就是直接拷贝官方代码即可，需要注意的是layui的版本，一定要用最新版本，我用的是V2.5.7，第一次用的比这个版本小，是V2.1.5，就不可以。

前端好实现，不好实现的是后端，我们接下来看看控制器中是如何进行操作的。

//图片上传
        @ResponseBody
        @RequestMapping("/uploadFile")
        public JSON uploadFile(MultipartFile file, HttpServletRequest request) {
            JSONObject json = new JSONObject();
            //路径
            String filePath = System.getProperty("user.dir") + "/src/main/resources/static/images/";//上传到这个文件夹
            File file1 = new File(filePath);
            //如果没有的话创建一个
            if (!file1.exists()) {
                file1.mkdirs();
            }
    
            //路径+文件名
            //文件名：file.getOriginalFilename()
            String finalFilePath = filePath + file.getOriginalFilename().trim();
            File desFile = new File(finalFilePath);
            if (desFile.exists()) {
                desFile.delete();
            }
            try {
                file.transferTo(desFile);
                json.put("code", 0);
                //将文件名放在msg中，前台提交表单时需要用到
                json.put("msg", file.getOriginalFilename().trim());
    
                JSONObject json2 = new JSONObject();
                json2.put("src", finalFilePath);
                json2.put("title", "");
                json.put("Data", json2);
    
            } catch (Exception e) {
                System.out.println(e.getMessage());
                json.put("code", 1);
            }
            System.out.println(json);
            return json;
        }

相关代码都进行了注释，然后就可以啦。

用到的json包是import com.alibaba.fastjson.JSON;在maven中可以添加如下依赖：

<dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.75</version>
            </dependency>

**往期精彩**

[哈哈哈哈哈哈！发现微信一个bug][bug]

[2021-03-25][bug]

[![62767fcbd73c721b0e9d1025179a04a7.png][] ][bug]

[微信超级更新！电脑上也能刷朋友圈了！][Link 1]

[2021-03-26][Link 1]

[![e4b8a03d6f57686cd58696f415395139.png][] ][Link 1]

[我一般在B站看这些破玩意...][B_...]

[2021-03-24][B_...]

[![f8f6ee339492b27c09ec5310814526a3.png][] ][B_...]

[有哪些道理是我当了程序员后才知道的？][Link 2]

[2021-03-23][Link 2]

[![c969fa6b43fdb3cee1987a9100246273.png][] ][Link 2]

[thymeleaf如何迭代遍历，如何判断][thymeleaf]

[2021-03-22][thymeleaf]

[![11edde2b32f6b89037ff222fdcc9a011.png][] ][thymeleaf]

![dcd6b8a330358197a0b8df6d1b2b3eb9.png][]

![e5eecf13ecc524ef69c465670fb372f7.png][]

点分享

![a0f20036afe1fcf9bfc815752a5f1083.png][]

点点赞

![f2faa08ee363ae60d8269ce2a5d1b942.png][]

点在看

[1f50e68fee14b9a58085559d2502a729.png]: /images/20221022/3b986b70d2e34cc895241517efaddb04.png
[a8def30c4ecbee2983e335991daa9f78.png]: /images/20221022/ebac49575fb34916b9dc499abeb86ba2.png
[9fd27ac8e3989e72c59a8d5d6a1769d6.png]: /images/20221022/dde03f36719d478482a600a068fa59f4.png
[bug]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fde31a0f85727959d88c597a0f4278b206ad5761be3b570b321d36f9336a71a2f4da5d4ff&idx=1&mid=2247501008&scene=21&sn=a2141928543223add6959f7f506ee538#wechat_redirect
[62767fcbd73c721b0e9d1025179a04a7.png]: /images/20221022/c82f504fd1944bd9955a73bde142fb55.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fde03a0f8571505635897484af416d8efba0d5ebe0a0ebd1df3d1800bcdb32c2aa7fa9edd&idx=1&mid=2247501026&scene=21&sn=348e2de2ddbb618f6e8a5e7f528b6810#wechat_redirect
[e4b8a03d6f57686cd58696f415395139.png]: /images/20221022/e3d71857291041cfa22492e0be781ebd.png
[B_...]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fde5ba0f8574db6929e4f555f3d6cc21ba0a25b9f44297db0446c34215a1845847766a6b3&idx=1&mid=2247500986&scene=21&sn=8421098f2d2e0c23bafd0af0445b4e5b#wechat_redirect
[f8f6ee339492b27c09ec5310814526a3.png]: /images/20221022/1e409462a5634d5db7acae703e558227.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fde45a0f85753a79d590603ae4d5dfa07e06f45b76dc3f755fc9f07534dc31c03c7282378&idx=1&mid=2247500964&scene=21&sn=13e9a06f5905501be7dffa6fdfb4a5b7#wechat_redirect
[c969fa6b43fdb3cee1987a9100246273.png]: /images/20221022/41922d0af590419d9dcf31c9fa8757c7.png
[thymeleaf]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fde73a0f8576577b7b0e52494d21cf8faaee6bb28b307dc71c023a3b34c0ea0dd0e079aa5&idx=1&mid=2247500946&scene=21&sn=585a50ad7ae094de2eb71488e86689dd#wechat_redirect
[11edde2b32f6b89037ff222fdcc9a011.png]: /images/20221022/efb3fdda7949423ca3f9218987de9a58.png
[dcd6b8a330358197a0b8df6d1b2b3eb9.png]: /images/20221022/e785f4b9273f437b88b475488d1b4088.png
[e5eecf13ecc524ef69c465670fb372f7.png]: /images/20221022/7f7f08390efa4dea9627288805fd5583.png
[a0f20036afe1fcf9bfc815752a5f1083.png]: https://img-blog.csdnimg.cn/img_convert/a0f20036afe1fcf9bfc815752a5f1083.png
[f2faa08ee363ae60d8269ce2a5d1b942.png]: https://img-blog.csdnimg.cn/img_convert/f2faa08ee363ae60d8269ce2a5d1b942.png