Загрузите несколько файлов каждый с дополнительной информацией весной - PullRequest
Новая
       15

Загрузите несколько файлов каждый с дополнительной информацией весной

0 голосов
/ 20 марта 2019

Я новичок в 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;
}

Я хотел бы знать, возможно ли загружать файлы, как описано объектами, или мне нужно загружать их отдельно.

1 Ответ

0 голосов
/ 20 марта 2019

Чтобы создать экземпляр книги из запроса, учитывая, что у вас есть маршрут, такой как: 

@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, и загрузите файл после, указав идентификатор страницы. 

@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, но, возможно, (в зависимости от вашего варианта использования) простой кнопки ввода файла + отправки может быть достаточно.

...