Как позволить пользователям загружать несколько файлов в Spring MVC, используя объект модели? - PullRequest
0 голосов
/ 04 ноября 2018

Когда пользователи нажимают на ссылку, мне нужно показать им описание, изображения, а также отправить несколько файлов для загрузки. Я использовал данные Spring, чтобы получить объект с несколькими строковыми переменными, списком изображений, а также документами из mongodb и добавил этот объект в модель. Я могу отображать описание и изображения после преобразования двоичных данных в строку и использования th: src = "* {'data: image / png; base64,' + image}" на странице html. До этой части все нормально. Но я не уверен, как разрешить пользователям загружать в модель файлы pdf в двоичном формате. Пожалуйста помоги. Пожалуйста, смотрите скриншоты. Когда я открываю эту страницу вместе с описанием и изображениями, я получаю подсказку, что есть файлы для скачивания. Как я могу достичь этого enter image description here

public class EventPostsDTO {
    private String postId;
    private Long eventId;
    private String description;
    private List<MultipartFile> images;
    private List<MultipartFile> receipts;
    private List<String> imgAsStrings;
    private Map<String,Binary> receiptsMap;
    private LocalDateTime creationDate;
    private Event event;
    //getters and setters
}

HTML-страница с Thymeleaf

            <!DOCTYPE html>
            <html xmlns="http://www.w3.org/1999/xhtml"
                xmlns:th="http://www.thymeleaf.org"
                xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
            <head>
            <title>Event Feed</title>
            <link th:include="fragments/header::includecss">
            </head>
            <body>
                <section th:replace="fragments/header::header"></section>
                <br>
                <br>
                <br>
                <section class="header4 cid-r8pwxTO9dF mbr-parallax-background"
                    id="header4-14">
                    <div class="container">
                        <h2 th:text="${event.eventName}"
                            class="mbr-section-title align-center pb-3  mbr-fonts-style display-1">
                            INTRO WITH IMAGE</h2>
                        <div th:each="post : ${posts}">
                            <div class="row justify-content-md-left">
                                <div class="media-content col-md-10">
                                    <div class="mbr-text align-left pb-3">
                                        <h3 class="mbr-text mbr-fonts-style display-5"
                                            th:text="${post.description}"></h3>
                                        <em class="mbr-fonts-style"
                                            th:text="${'Posted on '+post.creationDate}">Intro with
                                            background image, color overlay and a picture at the bottom.
                                            Mobirise helps you cut down development time by providing you
                                            with a flexible website editor with a drag and drop interface.</em>
                                    </div>
                                </div>

                                <div th:each="image : ${post.imgAsStrings}">
                                    <div class="mbr-figure pt-5">
                                        <img th:src="*{'data:image/png;base64,'+image}" alt=""
                                            width="100%" height="auto" class="imgdiv" />
                                    </div>
                                </div>
                                <div th:each="receipt : ${post.receiptsMap}">
                                    <embed src="pdfFiles/interfaces.pdf" th:src="${receipt.key}" width="600"
                                        height="500" alt="pdf"
                                        pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
                                    </embed>
                                </div>
                            </div>
                        </div>

                    </div>
                </section>
                <section th:replace="fragments/footer::footer"></section>
                <script
                    src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
            </body>

1 Ответ

0 голосов
/ 06 ноября 2018

Предполагая, что вы используете Spring Boot, Spring Data Mongo, вам следует рассмотреть возможность использования Spring Content Mongo для таких хранилищ контента:

Добавьте следующие зависимости в ваш pom.xml

<dependency>
    <groupId>com.github.paulcwarren</groupId>
    <artifactId>spring-content-mongo-boot-starter</artifactId>
    <version>0.4.0</version>
</dependency>
<dependency>
    <groupId>com.github.paulcwarren</groupId>
    <artifactId>spring-content-rest-boot-starter</artifactId>
    <version>0.4.0</version>
</dependency>

Убедитесь, что в вашем приложении присутствует bean-компонент GridFsTemplate. Примерно так:

@Configuration
public class MongoConfig

   @Bean
   public GridFsTemplate gridFsTemplate() throws Exception {
      return new GridFsTemplate(mongoDbFactory(), mappingMongoConverter());
   }
   ...

Чтобы разрешить ассоциировать контент с вашей сущностью, присвойте ему следующие атрибуты:

public class Event {

    ... other attributes ...

    List<Image> images;
    List<Recepit> receipts;
}

public class Image {
    @ContentId
    private String contentId;

    @ContentLength 
    private long contentLength = 0L;

    @MimeType
    private String mimeType = "image/jpeg";
}

public class Receipt {
    @ContentId
    private String contentId;

    @ContentLength 
    private long contentLength = 0L;

    @MimeType
    private String mimeType = "image/jpeg";
}

Добавить интерфейс магазина:

@StoreRestResource
public interface EventImage extends ContentStore<Image, String> {
}

@StoreRestResource
public interface EventReceipt extends ContentStore<Receipt, String> {
}

Это все, что тебе нужно. При запуске приложения Spring Content увидит зависимости от модулей Mongo / REST и внедрит реализацию ImageStore и ReceiptStore для GridF, а также реализацию контроллера, поддерживающего полную функциональность CRUD, и отобразит эти операции. вниз на основные интерфейсы магазина. У вас будут конечные точки REST, доступные под /events/{eventId}/images и /events/{eventId}/receipts.

Итак

curl -X PUT /events/{eventId}/images -F 'file=@path/to/local/image' загрузит новое изображение и добавит его в список List<Image>

curl -X GET /events/{eventId}/images/ выдаст вам список изображений

curl -X GET /events/{eventId}/images/{contentId} получит изображение события

curl -X DELETE /events/{eventId}/images/{contentId} удалит изображение события

Квитанции будут работать так же.

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

НТН

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...