Angular POST请求中Quarkus MultipartForm的FileUpload为null问题

问题现象 #

按教程实现Angular文件上传功能后，Quarkus后端始终无法接收到上传文件，FileUpload对象为null，抛出异常：

java.lang.NullPointerException: Cannot invoke "org.jboss.resteasy.reactive.multipart.FileUpload.uploadedFile()" because "input.file" is null

后端代码片段 #

public static class FileUploadInput {
    @FormParam("file")
    public FileUpload file;
}

@POST
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces(MediaType.APPLICATION_OCTET_STREAM)
public Response getAndEncryptPdf(@MultipartForm FileUploadInput input){
    InputStream uploadedInputStream;
    try {
        log.info("here", input);
        uploadedInputStream = Files.newInputStream(input.file.uploadedFile());
        PDDocument document = PDDocument.load(uploadedInputStream);
        // 其余代码...
    } catch (Exception e) {
        // 异常处理...
    }
}

前端代码片段 #

模板部分：

<div class="text-center">
  <input class="form-control" type="file" 
          (change)="onChange($event)">

  <button (click)="onUpload()" 
      class="btn btn-success">
      Upload
  </button>
</div>

组件部分：

sendPDF(formData: FormData){
    console.log(formData)
    return this.http.post<any>("https://file.io", formData, {
      headers: new HttpHeaders({ 
        "Content-Type": "multipart/form-data"
      }),
      observe: 'response'
    });
  }

onChange(event) {
    this.file = event.target.files[0];
}

onUpload() {
    const formData = new FormData();
    formData.append('file',  this.file );
    this.sendDataService.sendPDF(formData).subscribe(
      (response) => {
        console.log('PDF uploaded successfully:', response);
      },
      (error) => {
        console.error('Error uploading PDF:', error);
      }
    );
}

问题原因 #

1. 前端手动设置Content-Type导致解析失败：手动指定Content-Type: multipart/form-data时，Angular不会自动添加必要的boundary分隔符，后端无法正确解析多部分表单数据。
2. 请求URL错误：前端代码中请求的是第三方地址https://file.io，而非自身Quarkus后端的上传接口。
3. 后端依赖缺失：若使用Quarkus Reactive模式，未添加resteasy-reactive-multipart依赖，会导致无法处理多部分表单请求。

解决方案 #

前端调整 #

1. 移除手动设置的Content-Type头：Angular在发送FormData时会自动生成包含boundary的正确Content-Type，无需手动指定。
2. 修正请求URL：将请求地址改为Quarkus后端的上传接口路径（例如/api/upload）。

修改后的sendPDF方法：

sendPDF(formData: FormData){
    console.log(formData)
    return this.http.post<any>("/api/upload", formData, {
      observe: 'response'
    });
}

后端调整 #

1. 确保依赖正确：如果使用Quarkus Reactive模式，在pom.xml中添加Multipart依赖：

<dependency>
    <groupId>io.quarkus</groupId>
    <artifactId>quarkus-resteasy-reactive-multipart</artifactId>
</dependency>

若使用传统JAX-RS模式，添加：

<dependency>
    <groupId>io.quarkus</groupId>
    <artifactId>quarkus-resteasy-multipart</artifactId>
</dependency>

2. 修复日志打印：原日志语句无法正确输出input对象，修改为：

log.info("Received upload request, input: {}", input);

方便排查input或file是否为null。

验证步骤 #

1. 重启Quarkus后端服务。
2. 前端选择文件并点击上传，打开浏览器开发者工具，查看请求头的Content-Type是否包含boundary（例如multipart/form-data; boundary=----WebKitFormBoundaryxxxx）。
3. 检查后端日志，确认input和input.file不为null，文件流正常加载。

内容的提问来源于stack exchange，提问作者Alexandru Badea