springboot+thymeleaf 实现图片文件上传及回显

摘要:
1.创建一个springboot项目,所以我在这里不多说。2.编写HTML页面!

1. 创建一个springboot工程, 在此就不多说了(目录结构).

springboot+thymeleaf 实现图片文件上传及回显第1张

2. 写一个HTML页面

<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet"href="../css/bootstrap.css">
    <title>Title</title>
</head>
<body>
    <form action="../upload"method="post"enctype="multipart/form-data">
        <input type="file"name="file"accept="image/*">
        <br>
        <input type="submit"value="上传"class="btn btn-success">
    </form>
    [[${filename}]]
    <br>
    <img th:src="@{${filename}}"alt="图片">
</body>
</html>

3. 配置application.properties文件, 在配置文件中声明图片的绝对路径及相对路径

server.port=8899
file.upload.path=F://images/
file.upload.path.relative=/images/**

4. 创建一个MyWebAppConfigurer java文件实现WebMvcConfigurer接口, 配置资源映射路径

注: 笔者使用的springboot版本为2.1.6

importorg.springframework.beans.factory.annotation.Value;
importorg.springframework.context.annotation.Configuration;
importorg.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
importorg.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
 * 资源映射路径
 */
@Configuration
public class MyWebAppConfigurer implementsWebMvcConfigurer {
    /**上传地址*/
    @Value("${file.upload.path}")
    privateString filePath;
    /**显示相对地址*/
    @Value("${file.upload.path.relative}")
    privateString fileRelativePath;
    @Override
    public voidaddResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(fileRelativePath).
                addResourceLocations("file:/" +filePath);
}
}

5. 编写Controller层

importorg.springframework.beans.factory.annotation.Value;
importorg.springframework.stereotype.Controller;
importorg.springframework.ui.Model;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestParam;
importorg.springframework.web.multipart.MultipartFile;
importjava.io.File;
importjava.io.IOException;
@Controller
public classTestController {
    /**上传地址*/
    @Value("${file.upload.path}")
    privateString filePath;
    //跳转上传页面
    @RequestMapping("test")
    publicString test() {
        return "Page";
    }
    //执行上传
    @RequestMapping("upload")
    public String upload(@RequestParam("file") MultipartFile file, Model model) {
        //获取上传文件名
        String filename =file.getOriginalFilename();
        //定义上传文件保存路径
        String path = filePath+"rotPhoto/";
        //新建文件
        File filepath = newFile(path, filename);
        //判断路径是否存在,如果不存在就创建一个
        if (!filepath.getParentFile().exists()) {
            filepath.getParentFile().mkdirs();
        }
        try{
            //写入文件
            file.transferTo(new File(path + File.separator +filename));
        } catch(IOException e) {
            e.printStackTrace();
        }
        //将src路径发送至html页面
        model.addAttribute("filename", "/images/rotPhoto/"+filename);
        return "Page";
    }
}

6. 完成

springboot+thymeleaf 实现图片文件上传及回显第2张

免责声明:文章转载自《springboot+thymeleaf 实现图片文件上传及回显》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇JAVA 基础之SQL注入防范频率带宽解释下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

IOS崩溃日志解析(crash log)

IOS的应用程序少不了crash,互联网统计分析工具友盟有一项目错误分析的功能,专门用于应用程序崩溃日志统计,最近研究友盟上统计到的崩溃日志,在此对崩溃日志做一个简单的总结。否则,应用将被iOS终止,并产生低内存崩溃报告。这样,我们去我们的dSYM文件看看我们的UUID是否和崩溃日志上的UUID一致,只有dSYM文件的UUID和崩溃日志上的UUID一致,我们...

Sql Server:创建用户并指定该用户只能看指定的视图,除此之外的都不让查看

--当前数据库创建角色execsp_Addrole“seeview”--创建了一个数据库角色,--添加了只允许访问指定视图的用户:execsp_Addlogin“login”、“password”、“default database name”execsp_ Addlogin“per”、“oa”不能在此处执行,execsp_Adduser“login nam...

allure报告实现保存失败用例截图功能

allure中可以保存日志信息和截图日志allure能够自动识别。截图需要自己在添加allure方法。...

wifi密码暴力破解

转自:Python最新暴力破解WiFi,攻破所有密码限制,最强破解!...

springMVC使用map接收入参 + mybatis使用map 传入查询参数

测试示例:控制器层使用映射来接收请求参数。从Debug中可以看到,请求中的参数值都是字符串形式。如果接收参数的映射直接传输到服务,mybatis将在接收参数时报告错误。因此,您需要首先对请求中的参数1packageorg.slsale进行预处理。测验23导入java.util。日期4导入java.util。HashMap;5导入java.ut...

uniapp安卓真机调试提示检测不到手机【解决办法】

以下是具体的解决方案:步骤1:打开、查找、单击并单击7次或更多次,以允许开发人员进行选择。...