如何在Spring Boot中实现每个文件带有额外字段的多个文件上传

Question

如何实现多个文件上传功能，每个文件在Spring Boot中都有自己的额外字段（例如comment，documentType）？

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

Answer 1

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

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

• 具有文件内容的Blob
• metadata -一个可以保存任何内容的对象-标题/注释-为其命名。

前端

您可以使用任何东西来模拟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;
}

然后，您可以POST表单数据，以给定的端点。

后端

您可以在请求中指定期望的其他RequestParts

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

FileMetadata是一个自定义Java POJO，您可以在其中反序列化FrontEnd的NewDocument的JSON表示NewDocument

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

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

现在的问题是如何识别哪个元数据用于哪个文件。

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

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