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にアップロードされた画像の内容を追加して、以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。