javascript - Hur man associerar ett ytterligare fält med en fil i FormData

I min webapplikation skickar jag FormData från en Angular-front till en Spring Boot-server.

Jag har följande Attachment-modell:

export interface Attachment {
    file: File;
    comment: string;
}

Jag skulle vilja skicka flera bilagor genom en FormData.

För närvarande kan jag skicka filerna framgångsrikt med följande kod:

attachments: Attachment[] = [];

// pushing some data to the array

const data = new FormData();
for (const attachment of this.attachments) {
      data.append('attachments', attachment.file);
}

// POSTing data to the server

Men detta inkluderar inte kommentarerna tillsammans med filerna.

Jag skulle också vilja inkludera kommentarerna på ett sätt som gör att servern exakt kan identifiera vilken kommentar som tillhör vilken fil.

Jag kan inte helt enkelt göra något som data.append('attachments', attachment), eftersom FormData endast kan ha sträng- och Blob-värden.

Den bästa idén jag kunde komma på är att lägga till kommentarerna i FormData med filnamnen som nycklar:

for (const attachment of this.attachments) {
      data.append('attachments', attachment.file);

      // the key is the file name and the value is the comment
      data.append(attachment.file.name, attachment.comment);
}

Men detta verkar inte vara en bra lösning och det är också omständligt att analysera på backend.

Finns det ett bättre sätt att göra detta på? Jag skulle verkligen uppskatta alla råd.

Relaterade artiklar