Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Imagem

Olá , como faço para incluir uma imagem quando eu for fazer o cadastro e mostrar a imagem na parte de detalhe do produto ? Teria um curso de exemplo, utilizando o spring MVC mesmo ?

8 respostas

Olá Jessica, a ideia é a mesma da aula 9 do curso (https://cursos.alura.com.br/course/spring-mvc-1-criando-aplicacoes-web/task/11453). Utilize o MultipartFile para fazer o upload da imagem e para mostrar no JSP utilize a tag <img> do html passando o caminho da imagem que deseja mostrar - para facilitar, sua classe Produto pode ter um atributo que guarda o caminho da imagem .

Espero ter ajudado e bons estudos!

Olá Thais, então tentei fazer da mesma forma que está lá , consigo gravar o caminho da imagem normalmente no BD porém a imagem não está dentro da pasta arquivos-sumario e eu não consigo puxar a imagem por não estar nessa pasta ... então estou um pouco perdida nessa parte ... como faço para ter a imagem na pasta para eu puxar ela no img ? Obrigada

Pode ser algum detalhe na sua classe FileSaver que tenha deixado passar, Você poderia postar o código de suas classes (ProdutosController e FileServer) e o form.jspdo produto aqui?

Olá Thais segue a classe FileSaver

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

@Component
public class FileSaver {
    @Autowired
    private HttpServletRequest request;

    public String write(String baseFolder, MultipartFile file) {

        try {
            String realPath = request.getServletContext().getRealPath("/" + baseFolder);
            String path = realPath + "/" + file.getOriginalFilename();
            file.transferTo(new File(path));
            return baseFolder + "/" + file.getOriginalFilename();

        } catch (Exception e) {
            throw new RuntimeException(e);    
        }

    }

}

A proxima classe é a do meu projeto que chama CadastroEvento

            <div class="container">
                <h1>Abrir Evento</h1>
                <p>Preencha as informações do evento a ser cadastrado.</p>

                <div class="row">
                    <div class="col my-3">
                        <form:form action="/saleTicket/eventos" method="post" commandName="evento" enctype="multipart/form-data">
                            <div class="form-row">
                                <div class="form-group col-md-8">
                                    <label for="inputEvento">Nome do Evento:</label> <input
                                        type="text" class="form-control" name="nomeEvento"
                                        id="inputEvento" placeholder="Evento">
                                    <form:errors path="nomeEvento"
                                        style="color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 2px 6px; border-radius: .25rem; margin-top: 5px; display: block; font-size: 14px;" />
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="inputData">Data do Evento:</label> <input
                                        type="date" class="form-control" name="data" id="inputData"
                                        placeholder="Data">
                                    <form:errors path="data"
                                        style="color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 2px 6px; border-radius: .25rem; margin-top: 5px; display: block; font-size: 14px;" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPalestrante">Nome do Palestrante:</label> <input
                                    type="text" class="form-control" id="inputPalestrante"
                                    placeholder="Palestrante" name="palestrante">
                                <form:errors path="palestrante"
                                    style="color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 2px 6px; border-radius: .25rem; margin-top: 5px; display: block; font-size: 14px;" />
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="inputHorario">Horário do Evento:</label> <input
                                        type="time" class="form-control" name="horaEvento"
                                        id="inputHorario" placeholder="Horário">

                                </div>
                                <div class="form-group col-md-8">
                                    <label for="inputLocal">Local do Evento:</label> <input
                                        type="text" class="form-control" name="localEvento"
                                        id="inputLocal" placeholder="Local">

                                </div>
                            </div>


                             <div class="form-group col-md-6 arquivo">
                                <span id='file-name' class="text-truncate">Foto</span> 
                                <label class="float-right labelFile" for='formControlFile'>Selecionar Arquivo</label> 
                                <input type="file" name="sumario" class="form-control-file" id="formControlFile">
                            </div>


                            <p class="preencha float-right mt-5">Preencha todos os campos corretamente.</p>
                            <hr>
                            <button type="submit" class="btn btn-azul float-right">Abrir
                                Evento</button>
                        </form:form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>

Uma dúvida mesmo eu gravando no BD a imagem o funcionamento é local, quando eu colocar o projeto na web funcionará normalmente ?

Olá Thais conseguir resolver o meu problema aqui, era só o caminho que estava puxando errado. Poderia me esclarecer uma coisa ? Quando faço o cadastro de produtos e quero dar update nos dados dele como fica a imagem ? Porque se eu não colocar nenhuma imagem ela grava no meu BD vazia , como arrumo isso ? se eu editar para atulizar os dados e coloco uma imagem nova funciona ... agora se não coloco imagem nenhuma ela não salva a anterior segue o update.jsp

<form:form action="/saleTicket/eventos/update/${eventos.id_evento}" method="post" enctype="multipart/form-data">
                        ${erroAtualizado }

                            <div class="form-row">
                                <div class="form-group col-md-8">
                                    <label for="inputEvento">Nome do Evento:</label> 
                                    <input type="text" class="form-control" name="nomeEvento" id="inputEvento" value="${eventos.nomeEvento}">

                                </div>
                                <div class="form-group col-md-4">
                                    <label for="inputData">Data do Evento:</label> 
                                    <input type="date" class="form-control" name="data" id="inputData" value="${eventos.data}">

                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPalestrante">Nome do Palestrante:</label> 
                                <input type="text" class="form-control" id="inputPalestrante" value="${eventos.palestrante}" name="palestrante">

                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="inputHorario">Horário do Evento:</label>
                                    <input type="time" class="form-control" name="horaEvento" id="inputHorario" value="${eventos.horaEvento}">
                                </div>
                                <div class="form-group col-md-8">
                                    <label for="inputLocal">Local do Evento:</label> 
                                    <input type="text" class="form-control" name="localEvento" id="inputLocal" value="${eventos.localEvento}">
                                </div>
                                <div class="form-group">
                                    <input type="hidden" name="excluir" class="form-control"
                                        value="${eventos.excluir}" />
                                </div>
                            </div>

                            <div class="form-group col-md-6 arquivo">
                                <span id='file-name' class="text-truncate">${eventos.sumarioPath}</span> 
                                <label class="float-right labelFile" for='formControlFile'>Selecionar Arquivo</label> 
                                <input  name="sumario" value="${eventos.sumarioPath}" type="file" class="form-control-file" id="formControlFile">
                            </div>

                            <p class="preencha float-right mt-5">Preencha todos os campos
                                corretamente.</p>
                            <hr>
                            <button type="submit" class="btn btn-azul float-right">Atualizar
                                Evento</button>
                        </form:form>

Obrigada

solução!

Olá Jessica, que bom que conseguiu resolver sua primeira dúvida! Sobre o update, o que você pode fazer é colocar uma imagem padrão na sua aplicação e caso o usuário não envie uma imagem (ou seja, seja vazia) você atribui a imagem padrão a ele.

Consegui Thaís obrigada

Boa, Jessica! :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software