如何在Spring Boot中使用每个文件的额外字段实现多个文件上载

Question

如何实现多文件上传功能，在Spring Boot中每个文件都有自己的额外字段（如注释、文档类型）？

这个答案可能与此相关，但它仅适用于单个文件：Spring boot controller-将Multipart和JSON上载到DTO

Answer 1

您可以在有效负载中对多个请求部分进行编码，并使用Spring Boot进行处理。

假设您需要为每个文件传递两件事：

• Blob具有文件内容
• 元数据-一个可以保存任何内容的对象-标题/注释-您可以命名它。

您可以使用任何东西来模拟FormData，这是在TypeScript中：

假设文档如下所示：

export interface NewDocument {
  title: string,
  comment: string,
  author: string,
  file: File
}

因此，FormData的生成可能如下所示：

private getFormData(doc: NewDocument): FormData {
  let formData: FormData = new FormData();
  const json: Blob = new Blob([JSON.stringify(doc)], {type: 'application/json'});
  formData.append('metadata', json); //adding the metadata
  const blob: Blob = new Blob([doc.file[0]], {type: doc.file[0].type});
  formData.append('file', blob); //adding the file contents
  return formData;
}

然后，您可以将表单数据发布到给定endpoint。

您可以指定请求中需要的不同请求部分

@PostMapping
public ResponseEntity<Void> uploadFile(@RequestPart("metadata") FileMetadata metadata,
@RequestPart("file") MultipartFile file) {
   //process
}

这里是一个自定义Java POJO，您可以将前端的新文档的JSON表示反序列化到其中

您应该能够将其转换为倍数版本。

@PostMapping
public ResponseEntity<Void> uploadFile(@RequestPart("metadata") FileMetadata[] metadatas,
@RequestPart("file") MultipartFile[] files) {
   //process
}

现在的问题是如何识别哪个元数据用于哪个html" target="_blank">文件。

一种简单的方法是将文件名编码到元数据对象中，并将其用于映射。

Answer 2

Html侧

<input id="files" type="file" name="files[]"  multiple />

上载

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
function uploadFiles(){
    var form = new FormData();
    var i=0;
    $.each($("input[type='file']")[0].files, function(i, file) {
        form.append('file', file);
        form.append('extradata','ola'+i);
        i++;
    });

    // send form data with ajax
    $.ajax({
        type: 'POST',
        url: '/uploadFiles',
        cache: false,
        contentType: false,
        processData: false,
        data : form,
        success: function(result){
            console.log(result);
            alert('upload success');
        },
        error: function(err){
            console.log(err);
        }
    })
}
</script>

和服务器端

@PostMapping("/uploadFiles")
public String uploadFiles(@RequestParam("file") MultipartFile[] files,
                          @RequestParam("extradata") String[] extras) throws Exception {
    int i = 0;
    Files.createDirectories(Paths.get("./uploaded/"));
    for (MultipartFile f : files) {
        Files.copy(f.getInputStream(), Paths.get("./uploaded/" + extras[i] + f.getOriginalFilename()));
        i++;
    }
    return "success";
}

您可以在此处找到运行示例https://github.com/ozkanpakdil/spring-examples/tree/master/demoMultiFileUpload