Как отобразить изображение @Lob из базы данных mysql, используя spring mvc и jsp

Question

Есть ссылка на github: https://github.com/Lukszn/ProjectProfile Я использую Spring 4.3.7.RELEASE, MySQL Connector Java: 5.1.39 и hibrnate: 5.2.9. Finaly Там у меня есть пользователь и его модель учетной записи. В аккаунте у меня есть @Lob accPicture и несколько строк (+ get / set). Я пытаюсь получить много ответов из stackoverflow и документации, чтобы показать изображение учетной записи, но безуспешно Напоследок подумайте, что я делаю: создал собственный ImageController. Я успешно сохранил изображение в базе данных, но когда я пытаюсь отобразить его в моем jsp, оно показывает «HTTP Status 400 - Запрос, отправленный клиентом, был синтаксически неверным. " Сначала я покажу вам свою модель пользователя:

@Entity
@Table(name = "users")
public class User implements Serializable{

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    @Column(unique = true)
    @NotBlank
    @Size(min=4,max=20)
    private String login;

    @NotBlank
    private String password;

    @Column(unique = true)
    @Email
    @NotBlank
    private String email;

    private String permission;

    @OneToMany()
    private List<Account> accounts;


    public User(final String login, final String password, final String email) {
        Preconditions.checkArgument(!Strings.isNullOrEmpty(login));
        Preconditions.checkArgument(!Strings.isNullOrEmpty(password));
        Preconditions.checkArgument(!Strings.isNullOrEmpty(email));
        this.login = login;
        this.password = password;
        this.email = email;
    }

    public User() {
    }
}
+ get/set

Модель аккаунта:

@Entity
@Table(name = "accounts")
public class Account {


    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private long id;

    private boolean ifBasicAccount;

    private String accTitle;

    private String accFirstName;

    private String accLastName;

    private String accBirthdate;

    private String accPhoneNumber;

    private String accEducation;

    private String accExperience;

    private String accAbilities;

    private String accInterests;

    private String accProjects;

    private String accDescription;

    @Lob
    private byte[] accPicture;


    @ManyToOne
    private User user;


    public Account() {
    }

   + get/set

следующий контроллер аккаунта:

@Controller
public class AccountController {

    @Autowired
    AccountRepository accountRepository;

    @Autowired
    UserRepository userRepository;


    @RequestMapping(method = RequestMethod.GET, value ="addAccount")
    public String addAccount(Model model) {
        Account account = new Account();
        model.addAttribute("account", account);

        return "addAccount";
    }

    @RequestMapping(method = RequestMethod.POST, value ="addAccount")
    public String addAccount(@ModelAttribute Account account, HttpSession session) {
        User user = userRepository.findOne((Long) session.getAttribute("user_id"));
        account.setIfBasicAccount(false);
        account.setUser(user);
        accountRepository.save(account);
        return "redirect:/accounts";
    }

    @RequestMapping("/accounts")
    public String accountList(Model model, HttpSession ses) {
        long userId = (Long) ses.getAttribute("user_id");
        List<Account> accounts = accountRepository.findUserAccounts(userId);
        model.addAttribute("accounts", accounts);
        return "accounts";
    }

    @RequestMapping(value = "/edit/{id}", method = RequestMethod.GET)
    public String editAccountForm(Model model, @PathVariable long id) {
        Account account = accountRepository.findOne(id);
        model.addAttribute("account",account);
        return "editAccountForm";
    }

    @RequestMapping(value = "/edit/{id}", method = RequestMethod.POST)
    public String editAccount(@ModelAttribute Account account, @PathVariable long id) {
        Account accountToUpdate = accountRepository.findOne(id);
        accountToUpdate.setAccTitle(account.getAccTitle());
        accountToUpdate.setAccFirstName(account.getAccFirstName());
        accountToUpdate.setAccLastName(account.getAccLastName());
        accountToUpdate.setAccBirthdate(account.getAccBirthdate());
        accountToUpdate.setAccPhoneNumber(account.getAccPhoneNumber());
        accountToUpdate.setAccEducation(account.getAccEducation());
        accountToUpdate.setAccExperience(account.getAccExperience());
        accountToUpdate.setAccAbilities(account.getAccAbilities());
        accountToUpdate.setAccInterests(account.getAccInterests());
        accountToUpdate.setAccProjects(account.getAccProjects());
        accountToUpdate.setAccDescription(account.getAccDescription());
        accountRepository.save(accountToUpdate);
        return "redirect:/accounts";
    }

    @RequestMapping("/delete")
    public String deleteAccount(Model model) {
        return "deleteAccount";
    }

    @RequestMapping("/read/{id}")
    public String read(@PathVariable long id) {
        return accountRepository.findOne(id).toString();
    }

    @RequestMapping("/delete/{id}")
    public String delete(@PathVariable long id) {
        Account account = accountRepository.findOne(id);
        accountRepository.delete(account);
        return "redirect:/accounts";
    }
}

и последний ImageController:

@Controller
@RequestMapping("/user")
public class ImageController {

    private AccountRepository accountRepository;

    @RequestMapping(value = "/accounts", method = RequestMethod.GET)
    public void showImage(@RequestParam("id") Long id, HttpServletResponse response, HttpServletRequest request)
            throws ServletException, IOException {

        Account account = accountRepository.getOne(id);
        response.setContentType("image/jpeg, image/jpg, image/png, image/gif");
        response.getOutputStream().write(account.getAccPicture());

        response.getOutputStream().close();
    }
}

мой .jsp для отображения учетной записи:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix = "fmt" uri = "http://java.sun.com/jsp/jstl/fmt" %>
     <%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/WEB-INF/parts/header.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<table class="table table-striped">
<h1>Accounts:</h1>
<c:forEach items="${accounts}" var="account" begin="0" varStatus="theCount">

    <tr>
        <td>${theCount.index+1}</td>
        <td><b>Nazwa: </b>${account.accTitle}</td>
        <td><b>Opis: </b>${account.accDescription}</td>
        <td><img src="/ProjectProfile/user/accounts?id=${account.id}"/></td>
        <td><a style="width: 180px;height: 20px;" href="./edit/${account.id}" class="badge badge-primary">Show/Edit</a></td>
        <td><a style="width: 180px;height: 20px;" href="./delete/${account.id}" class="badge badge-danger">Delete</a></td>
    </tr>
</c:forEach>
</table>

     <a href="<c:url value="/addAccount"/>">Add Account</a>

</body>
</html>

Может быть, мне нужно использовать Base64Encoder, но я не знаю как? .... Я использую pom.xml и AppConfig для конфигурации. Пожалуйста, проверьте этот проект, может кто-нибудь может помочь?

Answer 1

Хорошо, Eunito, посмотрим ... Изменен Account.java (модель):

@Entity
@Table(name = "accounts")
public class Account {


    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private long id;

    private boolean ifBasicAccount;

    private String accTitle;

    private String accFirstName;

    private String accLastName;

    private String accBirthdate;

    private String accPhoneNumber;

    private String accEducation;

    private String accExperience;

    private String accAbilities;

    private String accInterests;

    private String accProjects;

    private String accDescription;

    @Lob
    private byte[] accPicture;

    private String stringPhoto;





    @ManyToOne
    private User user;


    public Account() {
    }

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getAccTitle() {
        return accTitle;
    }

    public void setAccTitle(String accTitle) {
        this.accTitle = accTitle;
    }


    public String getAccFirstName() {
        return accFirstName;
    }

    public void setAccFirstName(String accFirstName) {
        this.accFirstName = accFirstName;
    }

    public String getAccLastName() {
        return accLastName;
    }

    public void setAccLastName(String accLastName) {
        this.accLastName = accLastName;
    }

    public String getAccBirthdate() {
        return accBirthdate;
    }

    public void setAccBirthdate(String accBirthdate) {
        this.accBirthdate = accBirthdate;
    }

    public String getAccPhoneNumber() {
        return accPhoneNumber;
    }

    public void setAccPhoneNumber(String accPhoneNumber) {
        this.accPhoneNumber = accPhoneNumber;
    }

    public String getAccEducation() {
        return accEducation;
    }

    public void setAccEducation(String accEducation) {
        this.accEducation = accEducation;
    }

    public String getAccExperience() {
        return accExperience;
    }

    public void setAccExperience(String accExperience) {
        this.accExperience = accExperience;
    }

    public String getAccAbilities() {
        return accAbilities;
    }

    public void setAccAbilities(String accAbilities) {
        this.accAbilities = accAbilities;
    }

    public String getAccInterests() {
        return accInterests;
    }

    public void setAccInterests(String accInterests) {
        this.accInterests = accInterests;
    }

    public String getAccProjects() {
        return accProjects;
    }

    public void setAccProjects(String accProjects) {
        this.accProjects = accProjects;
    }


    public String getAccDescription() {
        return accDescription;
    }

    public void setAccDescription(String accDescription) {
        this.accDescription = accDescription;
    }


    public byte[] getAccPicture() {
        return accPicture;
    }

    public void setAccPicture(byte[] accPicture) {
        this.accPicture = accPicture;
    }


    public String getStringPhoto() {
        return convertBinImageToString(accPicture);
    }

    public void setStringPhoto(String stringPhoto) {
        this.stringPhoto = stringPhoto;
    }

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }

    public boolean isIfBasicAccount() {
        return ifBasicAccount;
    }

    public void setIfBasicAccount(boolean ifBasicAccount) {
        this.ifBasicAccount = ifBasicAccount;
    }

    public static String convertBinImageToString(byte[] accPicture) {
        if(accPicture!=null && accPicture.length>0) {
            return Base64.getEncoder().encodeToString(accPicture);
        }
        else
            return "";
    }

}

У меня есть два контроллера для учетной записи (один только для показа изображения - я не уверен, что это хорошо, потому что у меня есть два одинаковых RequestMappings). Итак, см. Измененный ImageController:

@Controller
@RequestMapping("/admin/user")
public class ImageController {

    @Autowired
    AccountRepository accountRepository;

    @RequestMapping(value = "/accounts", method = RequestMethod.GET)
    public void showImage(@RequestParam("id") long id, Model model) {

        Account account = accountRepository.findById(id);
        String photoencodeBase64 = account.getStringPhoto();
        model.addAttribute("accPicture", photoencodeBase64);

    }
}

и .jsp для показа изображения:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix = "fmt" uri = "http://java.sun.com/jsp/jstl/fmt" %>
     <%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/WEB-INF/parts/header.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<table class="table table-striped">
<h1>Accounts:</h1>
<c:forEach items="${accounts}" var="account" begin="0" varStatus="theCount">

    <tr>
        <td>${theCount.index+1}</td>
        <td><b>Title: </b>${account.accTitle}</td>
        <td><b>Description: </b>${account.accDescription}</td>
        <td><b>Image: </b><img id="photo" src="data:image/png;base64,${account.accPicture}" /></td>
        <td><a style="width: 180px;height: 20px;" href="./edit/${account.id}" class="badge badge-primary">Show/Edit</a></td>
        <td><a style="width: 180px;height: 20px;" href="./delete/${account.id}" class="badge badge-danger">Delete</a></td>
    </tr>
</c:forEach>
</table>

     <a href="<c:url value="/addAccount"/>">Add Account</a>

</body>
</html>

так, что происходит - когда я добавляю новую учетную запись -> пишу название, имя и т. Д. И добавляю изображение из файла, мой браузер показывает мне HTTP Status 400 - The request sent by the client was syntactically incorrect. -> там мне нужно увидеть все учетные записи пользователей. В консоли STS ничего не произошло. В MySQL тоже.

Answer 2

Почему бы не использовать Spring Content JPA ? Это может обеспечить службу хранения и остальные конечные точки для управления контентом, связанным с объектами jpa.

pom.xml

   <!-- Java API -->
   <dependency>
      <groupId>com.github.paulcwarren</groupId>
      <artifactId>spring-content-jpa</artifactId>
      <version>0.1.0</version>
   </dependency>
   <!-- REST API -->
   <dependency>
      <groupId>com.github.paulcwarren</groupId>
      <artifactId>spring-content-rest</artifactId>
      <version>0.1.0</version>
   </dependency>

Конфигурация

@Configuration
@EnableJpaStores
@Import("org.springframework.content.rest.config.RestConfiguration.class")
public class MysqlConfig {

    // schema management
    // 
    @Value("/org/springframework/content/jpa/schema-drop-mysql.sql")
    private Resource dropRepositoryTables;

    @Value("/org/springframework/content/jpa/schema-mysql.sql")
    private Resource dataRepositorySchema;

    @Bean
    DataSourceInitializer datasourceInitializer() {
        ResourceDatabasePopulator databasePopulator =
                new ResourceDatabasePopulator();

        databasePopulator.addScript(dropReopsitoryTables);
        databasePopulator.addScript(dataReopsitorySchema);
        databasePopulator.setIgnoreFailedDrops(true);

        DataSourceInitializer initializer = new DataSourceInitializer();
        initializer.setDataSource(dataSource());
        initializer.setDatabasePopulator(databasePopulator);

        return initializer;
    }
}

Чтобы связать контент, добавьте аннотации Spring Content к своей учетной записи.

Account.java

@Entity
public class Account {

   // replace @Lob field with

   @ContentId
   private String contentId;

   @ContentLength
   private long contentLength = 0L;

   // if you have rest endpoints
   @MimeType
   private String mimeType = "text/plain";

Создать "магазин":

AccountImagesStore.java

@StoreRestResource(path="accountImages)
public interface AccountImagesStore extends ContentStore<Account, String> {
}

Это все, что вам нужно для создания конечных точек REST @ /accountImages. Когда ваше приложение запускается, Spring Content проверит ваши зависимости (см. Spring Content JPA / REST), взглянет на ваш AccountImagesStore интерфейс и внедрит реализацию этого интерфейса для JPA. Он также внедрит @Controller, который перенаправляет http-запросы к этой реализации. Это избавляет вас от необходимости реализовывать все это самостоятельно, что, я думаю, то, что вы ищете.

Итак ...

curl -X POST /accountImages/{account-id}

с запросом multipart / form-data сохранит изображение в базе данных и свяжет его с объектом учетной записи, чей идентификатор равен account-id.

curl /accountImages/{account-id}

получит его снова и так далее ... поддерживает полный CRUD.

Так что все, что вам нужно, чтобы отобразить это в вашем JSP, это тег изображения:

Есть несколько руководств по началу работы здесь . Справочное руководство - здесь . И здесь есть обучающее видео здесь . Кодовый бит начинается примерно на полпути.

НТН

Answer 3

<img id="photo" src="data:image/png;base64,${PHOTOYOUNEED}" />

В контроллере, отвечающем за отправку изображения на html:

(...)
    String photoencodeBase64 = modelX.getStringPhoto();
    modelAndView.addObject("PHOTOYOUNEED", photoencodeBase64 );

и я также использую этот метод в модели для преобразования байта [] в строку в base64:

public static String convertBinImageToString(byte[] binImage) {
    if(binImage!=null && binImage.length>0) {
        return Base64.getEncoder().encodeToString(binImage);
    }
    else
        return "";
}

и я вызываю его в методе getStringPhoto () внутри модели.