SpringBoot文件上传和回显（含数据库字段设置和背景图片设置）

SpringBoot文件上传和回显

思路

将上传的文件保存在服务器硬盘中，将文件路径保存在mysql数据库中。这样可以节省数据库的内存。

所以数据库中的字段为varchar。 对应实体类的属性为String。

1.准备条件

1.文件上传表单必备条件

• method属性设置为post。
• enctype属性设置为"multipart/form-data"
• 提供 文件上传输入框。

2.导入依赖

<dependency>
    <groupId>commons-fileuploadgroupId>
    <artifactId>commons-fileuploadartifactId>
    <version>1.4version>
dependency>
<dependency>
    <groupId>commons-iogroupId>
    <artifactId>commons-ioartifactId>
    <version>2.8.0version>
dependency>

3.配置文件上传大小

spring:
  servlet:
    multipart:
      max-file-size: 50MB

2.前端页面

• 这里使用的是Thymeleaf模板。
• preview(this)方法是为了将上传的图片显示出来。

<div class="form-group">
    <label for="picture" class="col-sm-2 control-label">首页图片label>
    <div class="col-sm-10">
        <input type="file" class="form-control" id="picture" name="picture" placeholder="请输入首页显示的图片" required="required" th:onchange="preview(this)" multiple="multiple">
    div>
div>
<div id="preview">
    
    <img style="width: 100px; height: 100px;display:none" id="imgHidden" />
div>

• preview（this）方法
  如果想使用，直接复制即可

//图片回显:
function preview(file) {
    $("#imgHidden").css("display", "none");
    var prevDiv = document.getElementById('preview');
    if (file.files && file.files[0]) {
        var reader = new FileReader();
        reader.onload = function(evt) {
          prevDiv.innerHTML = '+ evt.target.result + '" />';
        }
        reader.readAsDataURL(file.files[0]);
    } else {
         prevDiv.innerHTML = '
+
            file.value + '\'">
';
    }
}

3.后端处理

• 后端用两个参数来接收前端的数据。一个是实体类，一个是 file。
• 注意：file 实体类中并没有。所以，表单中可以不只含有一个对象的信息，还可以存放其他字段。

 @RequestMapping("/add")
public String add(Program program,@RequestParam("picture")MultipartFile file) throws IOException {
    //工具类
    PathUtil.savePath(program,file);
    programService.save(program);
    return "redirect:/toprogram";
}

PathUtil

• 这里文件的存储路径写死了，放在static/image 文件夹下。
• 在最后，对图片的存储位置进行分割，将相对于static文件夹的路径存入数据库，这样前端调用的时候可以直接获取。
• 如果要使用下边的代码，需要修改绝对路径。

public class PathUtil {
      //保存地址的方法
      public static void savePath(Program program,MultipartFile file) throws IOException {
          //获得SpringBoot当前项目的路径：System.getProperty("user.dir")
          String path= "D:/Google/springboot-travel/src/main/resources/static/image/";
          int len = path.length()-6;
          //按照月份进行分类：
          Calendar instance = Calendar.getInstance();
          String month = (instance.get(Calendar.MONTH) + 1)+"月";
          path = path+month;
          File realPath = new File(path);
          if (!realPath.exists()){
              realPath.mkdirs();
          }
          //上传文件地址
          System.out.println("上传文件保存地址："+realPath);
          //解决文件名字问题：我们使用uuid;
          String filename = "pg-"+ UUID.randomUUID().toString().replaceAll("-", "")+".jpg";
          File newfile = new File(realPath, filename);
          //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
          file.transferTo(newfile);
          String substring = path.substring(len);
          program.setPictureUrl(substring+"/"+filename);
      }
}

4.前端调用数据

• 是普通图片的话，直接调用即可。

<img th:src="@{${program.getPictureUrl()}}">

• 主要想讲 设置背景图片的方法。

使用了拼接字符串的方法。

网上有的使用@{}来取值，报错。使用${}成功获取到图片。

<div th:style="'background-image:url('+${program.getPictureUrl()}+');'">div>