04-26 02:40 阅读 271

Springboot在新增和修改下上传图片并显示

解决的问题：

本篇文章除了解决上传图片并显示的问题，还有就是在新增和修改下的图片上传如何处理。在这里新增和修改的页面是同一页面，修改的时候，将会把值带过去，但是由于类型为file的input标签是不能给其赋值的，那么若不改变原来图片，但是input标签中又没有值，这时怎么处理呢？

一运行环境

开发工具：IDEA

后端：Springboot+JPA

前端：thymeleaf+semantic UI

二代码实现

springboot中已经内嵌了上传图片的依赖包，因此不需要再添加额外依赖。

1 前端页面

</div>

</div>

</form>

注意：enctype的值为multipart/form-data

2 创建上传图片类——UploadImageUtils

package com.hdq.blog_3.util;

import org.springframework.web.multipart.MultipartFile;

import java.io.File;

import java.io.IOException;

import java.util.UUID;

public class UploadImageUtils {

// 文件上传

public static String upload(MultipartFile file){

if(file.isEmpty()){

return "";

}

String fileName = file.getOriginalFilename();//获取文件名

String suffixName = fileName.substring(fileName.lastIndexOf("."));//获取文件后缀名

//重命名文件

fileName = UUID.randomUUID().toString().replaceAll("-","") + suffixName;

// windows下

// String filePath="E:/picture/";

//centos下

String filePath="/opt/findBugWeb/picture/";

File dest = new File(filePath+fileName);

if(!dest.getParentFile().exists()){

dest.getParentFile().mkdirs();

}

try{

file.transferTo(dest);

}catch (IOException e){

e.printStackTrace();

}

return filePath.substring(filePath.indexOf("/"))+fileName;

}

3 配置图片访问路径的类——SourceMapperConfig

该类可以指定图片的访问路径。

package com.hdq.blog_3.sourceMapper;

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 SourceMapperConfig implements WebMvcConfigurer {

// private String fileSavePath = "E:/picture/";

String fileSavePath="/opt/findBugWeb/picture/";

/**

* 配置资源映射

* 意思是：如果访问的资源路径是以“/images/”开头的，

* 就给我映射到本机的“E:/images/”这个文件夹内，去找你要的资源

* 注意：E:/images/ 后面的 “/”一定要带上

@Override

public void addResourceHandlers(ResourceHandlerRegistry registry) {

registry.addResourceHandler("/opt/findBugWeb/picture/**").addResourceLocations("file:"+fileSavePath);

}

4 创建Controller类——BlogController

package com.hdq.blog_3.web.admin;

import com.hdq.blog_3.po.Blog;

import com.hdq.blog_3.po.User;

import com.hdq.blog_3.service.BlogService;

import com.hdq.blog_3.service.TagService;

import com.hdq.blog_3.service.TypeService;

import com.hdq.blog_3.util.UploadImageUtils;

import com.hdq.blog_3.vo.BlogQuery;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.data.domain.Pageable;

import org.springframework.data.domain.Sort;

import org.springframework.data.web.PageableDefault;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.*;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import javax.servlet.http.HttpSession;

@Controller

@RequestMapping("/admin")

public class BlogController {

private static final String INPUT="admin/blogs-input";

private static final String LIST="admin/blogs";

private static final String REDIRECT_LIST="redirect:/admin/blogs";

@Autowired

private BlogService blogService;

@Autowired

private TypeService typeService;

@Autowired

private TagService tagService;

private void setTypeAndTag(Model model){

model.addAttribute("types",typeService.listType());

model.addAttribute("tags",tagService.listTag());

}

//新增 or 修改

@PostMapping("/blogs")

public String post(@RequestParam("picture") MultipartFile picture, Blog blog, RedirectAttributes attributes, HttpSession session){

blog.setUser((User) session.getAttribute("user"));

blog.setType(typeService.getType(blog.getType().getId()));

blog.setTags(tagService.listTag(blog.getTagIds()));

//1.修改：picture为空，则不改变FirstPicture，否则改变FirstPicture。

//2.新增：直接添加图片文件

Blog b;

if(blog.getId() == null){

blog.setFirstPicture(UploadImageUtils.upload(picture));//重点

b=blogService.saveBlog(blog);

}else{

// isEmpty()与null的区别：前者表示内容是否为空，后者表示对象是否实例化，在这里前端发送请求到后端时，就实例化了picture对象

if(picture.isEmpty()){

blog.setFirstPicture(blogService.getBlog(blog.getId()).getFirstPicture());//重点

}else {

blog.setFirstPicture(UploadImageUtils.upload(picture));//重点

}

b=blogService.updateBlog(blog.getId(),blog);

}

if(b == null){

attributes.addFlashAttribute("message","操作失败!");

}else{

attributes.addFlashAttribute("message","操作成功!");

}

return REDIRECT_LIST;

}

注意：以上部分不重要的代码已删掉，只留下重要部分。

三运行结果展示

1 初始页面

2 新增成功页面

a.添加图片

b.新增成功

3 修改成功页面

至此就完成了，都看到这了，点个赞吧！

————————————————

原文链接：https://blog.csdn.net/qq_36134376/article/details/116107651