关于前端:Spring-Boot实现文件上传功能

通过 form 表单来上传文件
提交形式为 post
enctype 格局为 ”multipart/form-data”
input 类型为 file

name 属性必须和 Controller 中办法的形参名称统一

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2> 用户注册 </h2>
<form action="/register" method="post" enctype="multipart/form-data">
    用户名:<input type="text" name="username"><br><br>
    明码  :<input type="password" name="password"><br><br>
    头像  :<input type="file" name="uploadFile"><br><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

创立一个数据库用来保留登录的用户名，明码，文件名

咱们能够写一个工具类

public class  UUIDUtils  {public  static  String  createNewUUID(){String uuid = UUID.randomUUID().toString();
        // 如果要把 uuid 的 - 去掉替换成空字符串 而后须要把 32 为字符串变成 64 字符串
        uuid = uuid.replace("-", "");
        return uuid+uuid;
    }
}

实体类 User

@Data
public class User { 
    private Integer id;
    private String username;
    private String password;
    private String filename;
}

Controller

@Controller
public class  UserController  { 
    @Autowired
    private UserService userService;

    /**
     * 显示注册画面
     * @return
     */
    @RequestMapping("/show")
    public String show(){return "/page/register.html";}
    @PostMapping("/register")
    public String register(User user, @RequestParam("uploadFile") MultipartFile uploadFile){System.out.println("用户:"+user);
        System.out.println("文件:"+uploadFile);
        // 创立本地文件
        // 思考文件名，文件名要是惟一的 必须要保障每一个用户注册上传的图片，文件等，必须保留成惟一的文件名
        //Java 技术 Java UUID User Unique ID 自身用于给用户指定惟一的 ID，能够用它来产生惟一的随机字符串
        //uuid 默认返回的是 32 位字母组成的随机字符串，反复的概率简直为 0
        // 创立惟一文件名
        String fileName= UUIDUtils.createNewUUID();
        // 咱们须要文件的后缀也应该不是写死的，前端上传的后缀是啥，咱们保留的就是什么
        // 获取原生文件的文件名
        String originalFilename = uploadFile.getOriginalFilename();
        System.out.println(originalFilename);
        // 创立文件的后缀名
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
        // 创立新的文件门路
        String filePath=fileName+suffix;

        File srcFile = new File("D:/springboot/download/img/"+filePath);
        try { 
            // 把前端传送的文件保留在本地中
            uploadFile.transferTo(srcFile);
        } catch (IOException e) {e.printStackTrace();
        }
        user.setFilename(filePath);
        try {userService.register(user);
        } catch (Exception e) {e.printStackTrace();
        }
        return "";
    }

}

Service

public interface  UserService  {void  register(User user)  throws  Exception;
}

Service 实现类

@Service
public class  UserServiceImpl  implements  UserService  { 
    @Autowired
    private UserMapper userMapper;
    @Override
    public  void  register(User user)  throws  Exception  {userMapper.insert(user);
    }
}

Mapper

@Mapper
public interface  UserMapper  {@Insert("insert into user values(default,#{username},#{password},#{filename})")
    void  insert(User user);
}

先筹备好页面 jsp

<%@page language="java" isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
  <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Title</title>
      </head>
      <body>
        <h2> 文件的上传 </h2>
        <form action="/file/upload" method="post" enctype="multipart/form-data">
          文件上传:<input type="file" name="uploadFile"><br><br>
          <input type="submit" value="提交">
        </form>
      </body>
</html>

<%@page language="java" isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="/img/${filePath}"> 图像 </img>
    门路:${filePath}
</body>
</html>

编写 Controller

@Controller
@RequestMapping("/file")
public class  FileUploadController  { 
    /**
    * 显示画面
    * @return
    */
    @RequestMapping("/show")
    public String show(){return "file.jsp";}

    @RequestMapping(value =  "/upload",method =  RequestMethod.POST)
    public String fileUpload(MultipartFile uploadFile, HttpSession session){ 
        // 利用 uuid 创立惟一的字符串 让这个字符串作为文件名
        String fileName = UUIDUtils.createNewUUID();

        // 获取上传文件的文件名
        String originalFilename = uploadFile.getOriginalFilename();
        // 获取后缀名
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
        // 创立文件保留门路
        String filePath=fileName+suffix;
        File srcFile=new File("D:/springboot/download/img/"+filePath);
        // 把前端文件保留在本地
        try {uploadFile.transferTo(srcFile);
            // 把文件寄存在本地的文件门路保留在 session 域中
            session.setAttribute("filePath", filePath);

        } catch (IOException e) {e.printStackTrace();
        }
        // 咱们心愿网页上能够把图片显示进去
        System.out.println("文件寄存门路:"+filePath);
        return "show.jsp";
    }

}

不过，咱们能够发现，当咱们点击提交的时候，图片还是无奈显示

@Configuration
public class  WebConfig  implements  WebMvcConfigurer  { 
    // 实现资源的虚构门路和物理门路的映射

    @Override
    public  void  addResourceHandlers(ResourceHandlerRegistry registry)  {registry.addResourceHandler("/img/**")
                 .addResourceLocations("file:"+"D:\\springboot\\download\\img\\");
    }
}

addResourceHandler(“xxx”) 用于指定对外裸露的拜访门路，addResourceLocations(“xxx”) 用于指定文件搁置门路

关于前端:Spring-Boot实现文件上传功能

前端解决

后端解决

物理门路和虚构门路映射