KKB : springBoot 文件（图片）上传 的 前后台 处理

项目 图片文件上传

注意重复文件名的处理

页面使用基于bootstrap的图片上传插件 fileinput

 

步骤一：

引入相关的依赖的插件

<script src="/assets/js/bootstrap.min.js"></script> 
<link href="/js/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="/js/fileinput/js/fileinput.js" type="text/javascript"></script> 
<script src="/js/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>

步骤二：

方法一：在文件域中设置 class = "file"

<input id="rimageFile" name="rimageFile" class="file" type="file">

注意HTML的input属性 multiple，决定fileinput是否接收多图片上传

方法二：使用js把文件域转化成fileinput对象

<input id="rimageFile" name="rimageFile" type="file" > 
<script >
    $(function(){ 
    $("#rimageFile").fileinput({ 
            
    }); 
    }) 
</script>

 

 

后端处理前端发送的图片文件的处理

 

    @RequestMapping("/doadd")
    public String doAdd(Route route, @RequestParam("rimageFile") MultipartFile rimageFile, HttpServletRequest request) throws IOException {
        //项目部署目录 + img/prduct/rimage/
        String savePath = request.getServletContext().getRealPath("img/product/rimage/");
        //处理文件名重复
        String fileName = UUID.randomUUID().toString().replaceAll("-", "") + "." + FilenameUtils.getExtension(rimageFile.getOriginalFilename());

        //上传目录不存在，先创建
        File savePathDir = new File(savePath);
        if (!savePathDir.exists()) {
            savePathDir.mkdirs();
        }
        //保存文件
        rimageFile.transferTo(new File(savePathDir, fileName));
        //设置route的rimage属性等于图片的相对令
        route.setRimage("img/product/rimage/" + fileName);
        routeService.add(route);
        return "redirect:/admin/route/page";
    }

 

String savePath = request.getServletContext().getRealPath("img/product/rimage/");

获取项目的部署路径，即获取项目存储文件的位置，括号里的路径，表示的是增加 存储的项目路径（不写的话就是直接使用项目的部署路径，这里加上目录可以分层次显示）

String fileName = UUID.randomUUID().toString().replaceAll("-", "") + "." + FilenameUtils.getExtension(rimageFile.getOriginalFilename());

获取到文件名，上传的文件名可能重复，于是通过UUID重新编写文件名，加上文件的扩展名

File savePathDir = new File(savePath);

根据保存路径，创建文件存储路径（目前是空文件）

if (!savePathDir.exists()) {
    savePathDir.mkdirs();
}

文件路径不存在，则创建，此时再本地电脑上创建好了文件存储目录，是空文件

rimageFile.transferTo(new File(savePathDir, fileName));

使用transferTo方法上传文件，在savePath目录下可以看到上传的文件

---

 

图片数据在前端中回显

                         <!--回显缩略图-->
                        <script th:inline="javascript">
                            $(function () {
                                var rimage = '/' + [[${route.rimage}]];
                                $("#rimageFile").fileinput({
                                    initialPreview: ["<img src='" + rimage + "' class='file-preview-image' >"],
                                    overwriteInitial: true
                                });
                            }) 
                        </script>

 

 

处理线路的详细图

先删除原图，再上传新图，为方法添加事务机制

 

 

controller 层:

多文件的上传保存：

就是多了一个遍历而已，大图上传到大图文件夹，小图上传到小图文件夹

@RequestMapping("/doimage")
    public String doImage(Integer rid,
                          @RequestParam("bigPicFile") MultipartFile[] bigPicFile,
                          @RequestParam("smallPicFile") MultipartFile[] smallPicFile,
                          HttpServletRequest request) throws Exception {
        List<String> bigPic = new ArrayList<>();
        List<String> smallPic = new ArrayList<>();
        String path = request.getServletContext().getRealPath("/");
        for (MultipartFile f : bigPicFile) {
            File bigPath = new File(path + "img\\product\\big-pic\\");
            if (!bigPath.exists()) {
                bigPath.mkdirs();
            }
            String fileName = UUID.randomUUID().toString().replace("-", "") + "." + FilenameUtils.getExtension(f.getOriginalFilename());
            f.transferTo(new File(bigPath, fileName));
            bigPic.add("img/product/big-pic/" + fileName);
        }
        for (MultipartFile f : smallPicFile) {
            File smallPath = new File(path + "img\\product\\small-pic\\");
            if (!smallPath.exists()) {
                smallPath.mkdirs();
            }
            String fileName = UUID.randomUUID().toString().replace("-", "") + "." + FilenameUtils.getExtension(f.getOriginalFilename());
            f.transferTo(new File(smallPath, fileName));
            smallPic.add("img/product/small-pic/" + fileName);
        }
        //要添加的图片列表
        List<RouteImg> ris = new ArrayList<>();
        for (int i = 0; i < bigPic.size(); i++) {
            RouteImg img = new RouteImg();
            img.setRid(rid);
            img.setBigpic(bigPic.get(i));
            img.setSmallpic(smallPic.get(i));
            ris.add(img);
        }
        imgService.saveImg(rid, ris);
        return "redirect:/admin/route/page";
    }