SpringBoot项目图片文件的上传与显示

需求分析

在个人信息页面点击图片上传,上传文件到后台后,并修改图片的名称,设置为
唯一的名称,并同步跟新图片名称到数据库中

数据库设计

我的数据库中: Users存放用户名和密码, Member 存放用户详细信息(包括图片)

配置application.yml

设置自定义的文件上传目录:

# 自定义文件上传路径
web:
  # Linux
  # upload-path: /root/emsdemo/image
  # Windows 10
  upload-path: C:/Users/SIZ/Desktop/bishe/image/

后台代码

控制代码

    @Value("${web.upload-path}")
    private String path;
    @PostMapping("/users/doUpload/{uid}")
    public String UploadImage(@PathVariable("uid") Integer id,@RequestParam("imgfile")MultipartFile file,HttpServletRequest httpServletRequest){

        /**
         * header_img_url是从数据库里捞的，要和你本地或者线上的专门放图片的文件夹里的文件去匹配，
         * 如果一开始我捞了数据库的头像，发现这个已经存在文件夹里了，那我需要换头像的时候，
         * 就需要找文件夹里有没有和这一模一样的文件，很明显是有的，因为不管换不换头像之前，
         * 我这个头像一定是保存在数据库字段里面，并且也在文件夹里面，此时我要更换头像了，
         * 那我肯定要把文件的这个头像文件删掉并把新上传的头像文件加进来，不存历史记录，
         * 防止越来越多的头像占内存，并且，我要把这条记录插到数据库里面，，相当于更新了头像。
         */

        // 获取当前用户
        Subject currentUser = SecurityUtils.getSubject();

        Users curru = (Users) currentUser.getPrincipal();


        System.out.println("currenttUser.ID--> " + curru.getId());
        /**
         * 根据User.id  拿到member 全部信息
         */
        Member member = memberService.QueryOneMemberInfoByID(curru.getId());

        /**
         *  获取数据库中当前用户的照片
         *  若存在则删除,替换
         */
        File sqlfile = new File(member.getImage());
        Boolean isExits = sqlfile.exists();
        if(isExits){
            sqlfile.delete();
        }

        //得到将要上传的文件名
        String fileName = file.getOriginalFilename();

        //设置文件上传，并且设置了新的唯一名字XXXXX.jpg
        String newFileName = FileUtils.upload(file, path, fileName);

        /**
         *  连接数据库进行进行更新
         */
        HashMap<String, Object> memberMap = new HashMap<>();
        memberMap.put("image",newFileName);
        memberMap.put("id",id);
        SystemResult systemResult = memberService.UpdateMemberInfo(memberMap);
        if(systemResult.getStatus()!=200){
            // 失败

            System.out.println(systemResult.getMsg());
        }else {
            // 成功
            /**
             *  更新到IndexDto 中
             */
            Member afterUpdateImageMember = memberService.QueryOneMemberInfoByID(curru.getId());
            IndexDto indexDto = new IndexDto();
            UsersServiceAppoint.WriteUsersInfoToDto(indexDto,curru,afterUpdateImageMember);

            Session session =  currentUser.getSession();
            HttpSession httpSession = httpServletRequest.getSession();
            httpSession.setAttribute("IndexDto",indexDto);
            session.setAttribute("IndexDto",indexDto);

            System.out.println("进行了图片上传功能,并更新到数据库");
            System.out.println(systemResult.getMsg());
        }
        /**
         *  重定向到--->个人信息页面
         */
        return "redirect:/users/toProfilesPage/"+ id;
    }
    }

FileUtils代码

package com.sizaif.emsdemo.utils;

import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

public class FileUtils {

    /**
     * 唯一识别的UUID
     * @return
     */
    public static String getUUID(){
        return UUID.randomUUID().toString().replace("-", "");
    }

    /**
     * 获取文件后缀
     * @param fileName
     * @return
     */
    public static String getSuffix(String fileName){
        return fileName.substring(fileName.lastIndexOf("."));
    }

    /**
     * 和随机的UUID生成新的文件名
     * @param fileOriginName
     * @return
     */
    public static String getFileName(String fileOriginName){
        return getUUID() + getSuffix(fileOriginName);
    }

    /**
     * 保存文件到本地,并返回新的唯一文件名
     * @param file 文件
     * @param path 文件存放路径
     * @param fileName 文件名字
     * @return
     */
    public static String upload(MultipartFile file, String path, String fileName){
        String newFileName = getFileName(fileName);

        // 生成新的文件名
        String realPath = path + "/" + newFileName;
        File dest = new File(realPath);

        //判断文件父目录是否存在
        if(!dest.getParentFile().exists()){
            dest.getParentFile().mkdir();
        }

        try {
            //保存文件
            file.transferTo(dest);
            return newFileName;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }
}

MVCConfig设置

新建MyMvcConfig.java 
@Configuration
@Component
public class MyMvcConfig implements WebMvcConfigurer {

    
    //    接入虚拟路径（解决重启服务器才显示图片的问题）
    // 拦截本地路径
    // 前端代码只需要设置成到/images/目录下拿图片,
   	// 便可以自动到自己设置的path目录下拿图片
    @Value("${web.upload-path}")
    private String path;
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry){
        // addResourceHandler: （ 存储图片的虚拟路径，在 static 目录下的 picture 文件夹，用于存储上传图片）
        // addResourceLocations: （ file: + 存储图片的路径）
        registry.addResourceHandler("/images/**").addResourceLocations("file:" +path );
    }
    
}

前端代码

上传代码

<form enctype="multipart/form-data" method="post" th:action="@{/users/doUpload/} + ${ProfilesInfo.getId()}">
                <input class="btn btn-success " name="imgfile" type="file"><i class="fa  fa-image m-right-xs"></i>修改照片</input>
                <input type="submit" class="tn btn-success" value="上传">
            </form>

显示代码

${ProfilesInfo.getImage()} 拿到的是数据库中图片的名字

<img class="img-responsive avatar-view" th:src="@{/images/}+${ProfilesInfo.getImage()}" alt="Avatar" title="Change the avatar" onclick="F_Open_dialog()">