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

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

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

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 资源映射路径
 */
@Configuration
public class MyWebAppConfigurer implements WebMvcConfigurer {

    /**上传地址*/
    @Value("${file.upload.path}")
    private String filePath;
    /**显示相对地址*/
    @Value("${file.upload.path.relative}")
    private String fileRelativePath;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(fileRelativePath).
                addResourceLocations("file:/" + filePath);
    }
}

5. 编写Controller层

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;

@Controller
public class TestController {

    /**上传地址*/
    @Value("${file.upload.path}")
    private String filePath;

    // 跳转上传页面
    @RequestMapping("test")
    public String test() {
        return "Page";
    }

    // 执行上传
    @RequestMapping("upload")
    public String upload(@RequestParam("file") MultipartFile file, Model model) {
        // 获取上传文件名
        String filename = file.getOriginalFilename();
        // 定义上传文件保存路径
        String path = filePath+"rotPhoto/";
        // 新建文件
        File filepath = new File(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. 完成

原文地址:https://www.cnblogs.com/zhainan-blog/p/11169163.html

时间: 2024-10-12 04:24:29

springboot+thymeleaf 实现图片文件上传及回显的相关文章

.Net Core 图片文件上传下载

当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. 一.开发环境 毋庸置疑,宇宙第一IDE VisualStudio 2017 二.项目结构 FilesController 文件上传下载控制器 PictureController 图片上传下载控制器 Return_Helper_DG 返回值帮助类 三.关键代码 1.首先我们来看Startup.cs

SpringMvc MultipartFile 图片文件上传

spring-servlet.xml 1 <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> 2 <bean id="multipartResolver" 3 class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> 4 <property name="defaultEncoding&qu

Android图片文件上传实例

原文:Android图片文件上传实例 源代码下载地址:http://www.zuidaima.com/share/1550463718132736.htm 支持拍照图片上传和从手机相册中获取图片上传到服务器端的功能 源码截图

js的FileReader实现图片文件上传、预览

js的FileReader实现图片文件上传.预览 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用.您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件.1

图片上传并回显后端篇

图片上传并回显后端篇 我们先看一下效果 继上一篇的图片上传和回显,我们来实战一下图片上传的整个过程,今天我们将打通前后端,我们来真实的了解一下,我们上传的文件,是以什么样的形式上传到服务器,难道也是一张图片?等下我们来揭晓 我们在实战开始前呢,我们先做一下准备工作,比如新建一个java web工程,如果你不懂这个的话,那我建议你先学一下Javaweb,可以去我的公众号找一下这方面的教程.我们就给我们的工程起名为UpImg,我们再给他建一个web包和util包,再把我们以前前端做的图片回显的代码拷

图片上传并回显Ajax异步篇

图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormData对象 "FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用.如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()用来

springboot实现简单的文件上传

承接上一篇,这里记录一下简单的springboot文件上传的方式 首先,springboot简单文件上传不需要添加额外的jar包和配置 这里贴一下后端controller层的实现代码 补一份前台的HTML代码 补充,这里实现的是简单的单文件上传,没有指定存储路径和访问路径 windows下的话,图片默认的是保存在临时目录下的,示例如:C:\Users\用户名\AppData\Local\Temp\tomcat.8163613599402220500.8080\work\Tomcat\localh

spring-boot 参数长度、文件上传大小限制问题

spring boot 设置tomcat post参数限制 1.外置tomcat: 这个简单,直接在server.xml里面修改这句话: <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxPostSize="0"/> 没错就是修改这里的maxPostSize的值,

js实现图片文件上传的心得

今天研究一下图片上存的一个实现方法,由于上周没写技术周记,这次一定要写好! 那么问题来了:PHP处理图片上传时要求JQ实现数据的交互,怎么办? 这里涉及到的一个logo上传的需求,根据radio选择是否更新logo,同时form表单将以js事件处理 <div class="comLogo sbox"> <div class="CLheader">公司logo:</div> <div class="ui-imgsel