Discussion :

[Thomas423]

Bonjour à tous,

Voilà mon soucis --> J'ai un enregistrement de type BLOB dans ma base MySql qui contient une image (un tableau de bytes).

Ma question est la suivante: comment récupérer cette image pour l'afficher dans ma page xhtml? Je dois convertir mon tableau de bytes en fichier mais je n'ai rien trouvé de concret sur internet.

[kox2ee]

Bonjour,

Le plus simple est de faire une servlet, dont le rôle sera de récupérer chaque image par son id dans la base, puis d'écrire l'image dans le flux de réponse :

Avec une méthode de récupération de l'image définie dans la servlet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
	/**
         * Retourne l'image coorespondant à id 
         * @param id identifiant de l'image
         * @return bufferedImage
         */
	public BufferedImage getImageById(int id) {
		String sql= "select img from image where idImg = ?";
		BufferedImage buffimg = null;
		try {
			PreparedStatement stmt = conn.prepareStatement(sql);
			stmt.setInt(1,id);
			ResultSet result = stmt.executeQuery();
			if(result.next()){
				InputStream img = result.getBinaryStream(1);
				buffimg= ImageIO.read(img);
			}
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		return buffimg;
	}

Et le doGet de la servlet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String strId=request.getParameter("id");
		if(strId!=null&&!"".equals(strId)){
			try{
				int id=Integer.valueOf(strId);
				BufferedImage buffImg = getImageById(id);
				response.setContentType("image/png");
				if(buffImg!=null){
					OutputStream os = response.getOutputStream();
					ImageIO.write(buffImg, "png", os);
					os.flush();
					os.close();
				}
			}
			catch(NumberFormatException nfe){
				nfe.printStackTrace();
			}
		}
	}

Si l'URL mapping de la servlet est défini à /showImg,
l'appel de l'image en html devrait ressembler à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img src="/showImg?id=1">

Je n'ai pas testé avec Mysql...donc rien de garanti

[Thomas423]

Finalement, je crois que je vais modifier ma méthode d'enregistrement de mon image, car je ne suis que débutant et j'ai vraiment du mal à comprendre ton code kox2ee.

Je vais enregistrer l'image dans un répertoire et indiquer le lien dans la bdd.

Par contre s'il vous plait, pourriez vous m'expliquer le code à effectuer pour faire cela (oui, je suis un boulet ^^).

Pour faire mon enregistrement direct dans la base, j'avais simplement mis dans mon controleur, lié à ma page xhtml, le paramètre image.getBytes() dans mon setImage(), ce qui m'avait transformé mon UplodedFile en tableau de bytes, mais là je ne vois pas comment faire et je ne trouve pas grand chose.
Est ce possible de toujours utiliser inputFileUpload de tomahawk, ou faut il obligatoirement utiliser un RichFaces?

[Thomas423]

Finalement, je crois que je vais modifier ma méthode d'enregistrement de mon image, car je ne suis que débutant et j'ai vraiment du mal à comprendre ton code kox2ee.

Je vais enregistrer l'image dans un répertoire et indiquer le lien dans la bdd.

Par contre s'il vous plait, pourriez vous m'expliquer le code à effectuer pour faire cela (oui, je suis un boulet ^^).

Pour faire mon enregistrement direct dans la base, j'avais simplement mis dans mon controleur, lié à ma page xhtml, le paramètre image.getBytes() dans mon setImage(), ce qui m'avait transformé mon UplodedFile en tableau de bytes, mais là je ne vois pas comment faire et je ne trouve pas grand chose.
Est ce possible de toujours utiliser inputFileUpload de tomahawk?

[kox2ee]

On peut toujours passer par le inputFileUpload de tomahawk :

Si tu as un formulaire de ce genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<h:form enctype="multipart/form-data">
	<t:inputFileUpload value="#{imageUploadBB.uploadedFile}"  />         
	<h:commandButton id="uploadButton" action="#{imageUploadBB.actionUpload}" value="Uploader"></h:commandButton>
</h:form>

Le Backing bean associé pourra être implémenté de cette façon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
public class ImageUploadBB{  
 
	private UploadedFile uploadedFile; 
 
	public UploadedFile getUploadedFile(){
		return this.uploadedFile; 
	}
	public void setUploadedFile(UploadedFile uploadedFile){     
		this.uploadedFile = uploadedFile; 
	}
	//Méthode associée au bouton Uploader
	public String actionUpload(){
		InputStream is = uploadedFile.getInputStream();
		byte[] buffer = new byte[uploadedFile.getLength());
		is.read(buffer);
		File f = new File(cheminLocal + uploadedFile.getFilename());
		f.createNewFile();
		FileOutputStream fos = new FileOutputStream(f);
		fos.write(buffer);
		//Enregistrement de l'URL de uploadedFile.getFilename() dans la BDD
	}
}

• Je n'ai pas fait de gestion d'exception dans actionUpload alors qu'il faut en faire.
• cheminLocal peut être récupéré par request.getServletContext().getRealPath("/images") si les images sont sauvegardées dans un dossier images du contexte. On pensera à sauvegarder dans la base l'image sous /images/nomImage

[kox2ee]

Ne pas oublier de faire un close sur les flux :
fos.close();
is.close();

[Thomas423]

Ca fonctionne.
Merci beaucoup pour ton aide kox2ee, et tes explications.