[JAVA] Implémenter l'entrée / sortie d'image avec Spring MVC

Voir ici pour télécharger des images

Cliquez ici pour télécharger des images (https://qiita.com/shibafu/items/16dbf776bd81a40450fd)

Un petit détour

Si vous ne connaissez pas Spring et votre composition, je pense que c'est un fouillis, alors je vais vous expliquer un peu mon projet.

Il a une telle structure. Le ** contrôleur ** est le premier accès à ce serveur. Chacune des méthodes qu'elle contient accepte l'accès.

** Service ** est l'endroit où la description de traitement réelle du programme est stockée. Jetons un coup d'œil au contenu du service.

** L'interface ** est le point d'entrée des contrôleurs et autres programmes Java dans ce service. Et cela est implémenté dans une classe appelée hogehoge ** Impl **. (Impl signifie "mise en œuvre".)

Pourquoi est-il nécessaire de séparer la description du traitement et l'entrée? Voyons la description qui appelle réellement le service

Premier coup d'oeil au programme à droite Il est annoté ** @ Service **. Cela signifie qu'il s'agit d'une déclaration de "classe de service" et en même temps ** d'enregistrer une instance dans le conteneur DI **. ** Le conteneur DI ** est une fonction de Spring Framework, qui rend les programmes Java ** faiblement couplés **. Spring Framework contrôle la création et la publication des instances qui entrent dans le conteneur DI.

Ce qui me satisfait, c'est qu'il peut être compilé même si le traitement n'est pas implémenté. Jetons un coup d'œil à l'appel de service sur la gauche.

** Déclaration d'interface ** et Il est annoté ** @ Autowired **.

@Autowired est une commande pour "créer un conteneur DI enregistré, cette instance de type" (ne peut pas être utilisé lorsque deux ou plusieurs beans du même type sont enregistrés).

Ce à quoi vous devez faire attention ici, c'est que ** nous n'utilisons pas de new lors de la création de l'instance **. En d'autres termes, c'est un programme qui peut être compilé avec juste une classe vide appelée interface.

En concevant l'interface ** 1. Je peux imaginer les fonctions à créer ** ** 2. Il a l'avantage de pouvoir être compilé même si la fonction n'est pas implémentée **.

La structure d'un tel programme On dit qu'il s'appelle le modèle de conception ** façade (entrée principale) **. (Strictement parlant, cela semble un peu différent

C'est comme ça. Si vous vous appelez désormais un service, "traitement côté service" Si vous l'appelez un contrôleur, lisez-le comme "Oh, le premier processus que le serveur reçoit." Le côté est terminé.

Le sujet principal d'ici

Tout d'abord, enregistrez l'image dans la base de données.

Commencez par créer une fonction d'entrée d'image à l'aide du référentiel JPA. C'est juste cela, donc il n'y a pas de problème.

Commencez par créer un processus pour enregistrer l'image dans la base de données.

pictureServiceImpl.java

	@Autowired
	PictureMasterRepository pRepository;

	@Override
	public int addPicture(byte[] picturedata, String pictureName, String originalName, Integer uploadUserId) {
		//TODO talon de méthode généré automatiquement
		PictureMaster input = new PictureMaster();
		
		input.setPictureData(picturedata);
		input.setPictureName(pictureName);
		input.setOriginalName(originalName);
		input.setUploadUserId(uploadUserId);
		
		pRepository.saveAndFlush(input);
		
		return 0;

Ensuite, créez un processus pour lire l'image. Créons l'accès à la base de données en utilisant la fonction d'implémentation automatique du référentiel JPA.

PictureMasterRepository.java

@Repository
public interface PictureMasterRepository extends JpaRepository<PictureMaster, Integer> {


    public PictureMaster findByPictureId(Long pictureId);
    public PictureMaster findByPictureName(String pictureName);
    

    public List<PictureMaster> findByUploadUserId(int uploadUserId);
    
    //Recherche par J'aime
//    public List<UserMaster> findByUsernameLike(String usernamename);
//    public List<UserMaster> findByEmailLike(String email);
    
//    @Query("SELECT count(*) From UserMaster u WHERE u.username = :username")
//    public int countByUsername(@Param("username")String username);
}

pictureServiceImpl.java

	/**
	 *Renvoie une image enregistrée en fonction du nom d'utilisateur
	 */
	@Override
	public List<PictureMaster> readUserPicture(Integer uploadUserId) {
		
	List<PictureMaster> searchResult = pRepository.findByUploadUserId(uploadUserId);
	
	return searchResult;
	
	}

J'ai pu effectuer des traitements spécifiques ヾ (.> ﹏ <.) Nottater

Ensuite, transmettez le processus créé au contrôleur.

ImageIOController.java

		ModelAndView mv = new ModelAndView("ImageView");
		List<PictureMaster> UserPicutres = pictureService.readUserPicture(LoginUser.getUserId());
		

Jusqu'à présent, nous avons parlé de Java. Passons les données obtenues ici à jsp!

Lecture côté jsp

À propos, le contrôleur et jsp utilisent un objet appelé Model pour échanger des valeurs. C'est un peu différent de la chaîne.

Utilisons maintenant les dernières technologies. L'image enregistrée dans le DB est une donnée binaire, Convertissez-le en BASE64.

BASE64 est une méthode de codage pour échanger des données binaires à grande vitesse sur le Web. Remplace les données telles que les nombres hexadécimaux ordinaires par des données de 64 caractères de base. Il est implémenté à partir de Java8, alors utilisons-le.

ImageIOController.java

	@RequestMapping(value = "/imageView", method = RequestMethod.GET)
	public ModelAndView imageView(Principal principal) {
		
		//Obtenez des identifiants
        Authentication auth = (Authentication)principal;
        LoginUserDetails LoginUser = (LoginUserDetails)auth.getPrincipal();
		
		//Obtenir l'image d'enregistrement de l'utilisateur
		ModelAndView mv = new ModelAndView("ImageView");
		List<PictureMaster> UserPicutres = pictureService.readUserPicture(LoginUser.getUserId());
		
		for(PictureMaster pict:UserPicutres) {
			//Obtenir l'extension
			pict.setExtension(pict.getOriginalName().substring(pict.getOriginalName().length() - 4, pict.getOriginalName().length()));
			//Convertir en BASE64
			pict.setBase64string(Base64.getEncoder().encodeToString(pict.getPictureData()));
			//Supprimer les données binaires
			pict.setPictureData(null);
		}
		
		mv.addObject("UserName",LoginUser.getUsername());
		mv.addObject("UserPictures", UserPicutres);
		
		return mv;
	}

Comme ça. Veuillez consulter les commentaires pour connaître le contenu du processus.

Créons le traitement côté jsp.

ImageVire.html

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<head>
<meta content="ja" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Veuillez saisir votre image de mer ou d'eau préférée</title>
</head>

<body>
<p>
${UserName}C'est une image enregistrée par M. ヾ(¡>﹏<¡)Non</p>
<c:forEach var="picture" items="${UserPictures}" varStatus="status">

	<p>${picture.pictureName}</p>
	<img src="data:image/${picture.extension};base64,${picture.base64string}">

</c:forEach>
</body>

</html>

La boucle est bouclée avec la balise ** c ** habituelle. Le point est la balise ici.

Spécifiez l'extension avec ** $ {picture.extension} **, ** base64, $ {picture.base64string} ** spécifie le binaire base64.

En d'autres termes, la sortie HTML réelle ressemble à ceci.

ImageView.html

<img src="data:image/${picture.extension};base64,${picture.base64string}">

Courir

Courons

J'ai pu afficher l'image enregistrée comme ceci.

référence Comment intégrer une image directement dans un fichier HTML avec Base64 Je veux savoir comment saisir une image ou un fichier (pdf, etc.) dans JSP, l'enregistrer dans la base de données, puis l'appeler et l'afficher à l'écran.