如何在 java rest 客戶端中從 angular 接收 Blob 數據

Question

我在 angular 中創建了一個 pdf，我將它放入了一個 Blob object。 我將這個 Blob object 連同 Order object（結合在有效負載 OrderAndBlob 中）一起發送到我的 java restclient。 雖然我似乎無法收到這個值。 我總是收到 java 不理解 Blob object 進來的錯誤。我收到此錯誤：

com.fasterxml.jackson.databind.exc.InvalidDefinitionException: Cannot construct instance of `java.sql.Blob` (no Creators, like default constructor, exist): abstract types either need to be mapped to concrete types, have custom deserializer, or contain additional type information
 at [Source: (org.springframework.util.StreamUtils$NonClosingInputStream)

我按照這篇文章無法構造實例 - Jackson並嘗試添加

@JsonTypeInfo(use = JsonTypeInfo.Id.CLASS, include = JsonTypeInfo.As.PROPERTY, property = "@class")

在 OrderAndBlob 內的我的 Blob object 前面，但這只會改變錯誤。 如何確保 Blob object 被解析？

Angular ts代碼：

  @ViewChild('pdfOrder') pdfOrder!: ElementRef;

   confirmOrder(): void {

    let DATA: any = document.body;
    html2canvas(DATA).then( async (canvas) => {
          let fileWidth = 208;
          let fileHeight = (canvas.height * fileWidth) / canvas.width;
          let PDF = new jsPDF('p', 'mm', 'a4');
          let position = 0;
          PDF.addImage(canvas, 'PNG', 0, position, fileWidth, fileHeight);
          console.log("in ts file:" + PDF);
          this.pdfBlob = PDF.output('blob');
          console.log("in ts file converted to blob:" + this.pdfBlob);

    }).then((value:void)=>{
          this.salesproductService.submitOrderedItems(this.order, this.pdfBlob);
          this.router.navigate(["/main"]);
          }
    )

   
  }

Angular 服務：

  public submitOrderedItems(order: Order, pdf: Blob) {
    console.log("submitting ordered items");
    const url = "http://localhost:8080/orders/add";

    console.log(pdf);
    this.orderAndBlob = new OrderAndBlob(order, pdf);

    console.log(this.orderAndBlob);
    this.http.post(url, this.orderAndBlob).subscribe(value => {});
    
    console.log("sended");
  }

Java controller + object：

@RestController
@RequestMapping("/orders")
@CrossOrigin(origins = "*", maxAge = 3600)
public class OrderController {
    @PostMapping("/add")
    @PreAuthorize("hasRole('USER')")
    public void addOrders(@RequestBody OrderAndBlob orderAndBlob) {
        System.out.println(orderAndBlob.getBlob());
        orderService.saveOrderAndLines(orderAndBlob.getOrder());
    }
}



public class OrderAndBlob {
    private Order order;
    private Blob blob;
    public Order getOrder() {
        return order;
    }
    //@JsonTypeInfo(use = JsonTypeInfo.Id.CLASS, include = JsonTypeInfo.As.PROPERTY, property = "@class")
    public Blob getBlob() {
        return blob;
    }
    
    
}

Answer 1

使用 FormData 你可以這樣做，如果需要任何幫助，請告訴我

public postWithFormData(_url: string, blob: any, filename: any): Observable<any> 
{
    var formData = new FormData();
    formData.append("file", blob, filename);
    return this.httpclient.post(_url, formData, {
      reportProgress: true,
      responseType: "json"
    });
 }