Question

当用户单击链接时，我需要向他们显示说明，图像以及发送多个文件供他们下载。我使用Spring数据从mongodb中获取了一个带有几个String变量，图像列表以及文档的对象，并将该对象添加到Model中。将Binary数据转换为String并在html页面上使用th：src =“ * {'data：image / png; base64，'+ image}”之后，我能够显示说明和图像。直到这部分，一切都很好。但是我不确定如何让用户下载模型中二进制格式的pdf文件。请帮忙。请看截图。打开此页面以及“描述和图像”时，我会提示您有一些文件可供下载。我该如何

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
}

带有Thymeleaf的HTML页面

            <!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>

Answer 1

假设您正在使用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>

确保在应用程序上下文中存在GridFsTemplate bean。类似于以下内容：

@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模块上的依赖关系，并将为GridFs注入ImageStore和ReceiptStore的实现，以及支持完整CRUD功能的控制器的实现并将这些操作向下映射到基础存储接口。您将在/events/{eventId}/images和/events/{eventId}/receipts下拥有REST端点。

所以

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}将删除事件图像

收据的工作方式相同。

有两个入门指南here。他们将Spring Content用于文件系统，但是模块是可互换的。 Mongo参考指南为here。还有一个教学视频here。

HTH

如何让用户使用模型对象在Spring MVC中下载多个文件？

1 个答案: