上传多个文件，每个文件在 spring 中包含附加信息

Question

我是 spring boot 和 js 的新手，我正在尝试上传多个文件，每个文件都有附加信息，如描述等。

对象：

public class BookDto {
    private String title;
    private String author;
    private List<PageDto> pageDtoList;
    // getters setters
}

public class PageDto {
    private String description;
    private MultipartFile file;
    // getters setters
}

控制器：

public class UploadController{

    @PostMapping("/upload")
    public ResponseEntity createGenre(@RequestBody BookDto bookDto){
       // do something with data
    }
}

Html :

<form action="upload" method="post" enctype="multipart/form-data">
    <input type="file" multiple onclick="postRequest(event)">
    <input type="submit" value="Upload" name="submit">
</form>

JS :

function postRequest(event){
    event.preventDefault();
    var files = [].slice.call(event.target.files);
    var pageList = [];
    for (var i=0; i<files.length; i++) { 
        pageList.push(new Page( i + "some description",files[i]));
    }
    var newBook = new Book();
    newbook.pageList = pageList;
    book.author = "author1";
    book.title = "title1";
    $.ajax({
        type: "POST",
        data: // i don't really know what to put here,
        url: "/upload",
        success: function (response) {
            // success
        },
        error: function (result) {
            // error
        }
    });

}

function Book(title, author, chapter, pageList){
    this.title = title;
    this.author = author;
    this.pageList = pageList;
}

function Page(description, file) {
    this.description = description;
    this.file = file;
}

我想知道是否可以按照对象描述上传文件，还是必须单独上传。

Answer 1

为了根据请求创建图书实例，考虑到您有如下路线：

@PostMapping("/createBook")
    public ResponseEntity createBook(@RequestBody BookDto bookDto){
       // do something with data
    }

您可以从客户端继续执行以下操作：


const book = {
   author: "George Orwell",
   title: "1984",
   pageDtoList: []
};

$.ajax({
        type: "POST",
        data: book,
        url: "/createBook",
        success: function (response) {
            // success
        },
        error: function (result) {
            // error
        }
    });

然后您可以使用相同的逻辑添加页面，但将文件临时设置为 null，然后在给定页面 ID 的情况下上传文件。

@PostMapping("/addPageToBook")
    public ResponseEntity addPage(@RequestParam("bookid") String bookId, 
                                  @RequestBody PageDto pageDto){

       // add a page instance to your book
    }

然后可以设置页面内容:

@PostMapping("/setPageContent")
    public ResponseEntity setPage(@RequestParam("bookid") String bookId, 
                                  @RequestParam("pageid") String pageId,
                                  @RequestParam("file") MultipartFile content){

       // set content to page, ensure book dto is updated with last page instance
    }

您将需要使用 https://developer.mozilla.org/en-US/docs/Web/API/FormData 进行 AJAX 上传，但也许（取决于您的用例）一个简单的文件输入按钮 + 提交就足够了。

上传多个文件，每个文件在 spring 中包含附加信息

Upload multiple files each with additional information in spring

javascript

spring

multiple-file-upload