Springbootについては、写真を新規にアップロードして表示する問題です。
解決された問題:
この文章はアップロードされた画像を解決して表示する問題以外に、追加と修正された画像をアップロードしてどのように処理しますか?ここで新たに作成したページと修正したページは同じページです。修正すると、値を持っていきますが、タイプがfileのinputタグは与えられないので、元の画像を変えないと、inputタグの中に値がないです。どう処理しますか?
一運転環境
開発ツール:IDEA
バックエンド:Sprigboot+JPA
フロントエンド:thymeleaf+semantic UI
二コード実現
springbootには既にアップロードピクチャの依存パッケージが埋め込まれていますので、追加の依存性は必要ありません。
1フロントエンドページ
2アップロードピクチャクラスを作成する――UploadImageUtils
クラスは、画像のアクセスパスを指定できます。
三運転結果の展示
1初期ページ
2新規作成成功ページ
a.画像を追加する
b.新規作成成功
3変更成功ページ
ここで、Springbootについては、写真を追加して修正してアップロードし、表示する問題についての文章をここに紹介します。さらに関連するspringbootにアップロードされた画像の内容を追加して、以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。
この文章はアップロードされた画像を解決して表示する問題以外に、追加と修正された画像をアップロードしてどのように処理しますか?ここで新たに作成したページと修正したページは同じページです。修正すると、値を持っていきますが、タイプがfileのinputタグは与えられないので、元の画像を変えないと、inputタグの中に値がないです。どう処理しますか?
一運転環境
開発ツール:IDEA
バックエンド:Sprigboot+JPA
フロントエンド:thymeleaf+semantic UI
二コード実現
springbootには既にアップロードピクチャの依存パッケージが埋め込まれていますので、追加の依存性は必要ありません。
1フロントエンドページ
<form id="blog-form" action="#" th:object="${blog}" th:action="@{/admin/blogs}" method="post" enctype="multipart/form-data" class="ui form">
<!-- , -->
<div class="required field">
<div class="ui left labeled input">
<label class="ui teal basic label"> </label>
<img src="" th:src="@{*{firstPicture}}" alt="" style="width: 500px !important;">
<!-- input type="file" -->
<input type="file" name="picture">
<!--<input type="text" name="firstPicture" th:value="*{firstPicture}" placeholder=" ">-->
</div>
</div>
<!-- , -->
<div class="ui right aligned container">
<button type="button" class="ui button" onclick="window.history.go(-1)"> </button>
<button type="button" id="save-btn" class="ui secondary button"> </button>
<button type="button" id="publish-btn" class="ui teal button"> </button>
</div>
</form>
注意:enctypeの値はmultiiprt/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変更成功ページ
ここで、Springbootについては、写真を追加して修正してアップロードし、表示する問題についての文章をここに紹介します。さらに関連するspringbootにアップロードされた画像の内容を追加して、以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。