Dateinamen in der Dateieingabe programmgesteuert anzeigen: Mit Angular implementiert

Question

Guten Abend,

Ich entwickle eine Anwendung mit Angular15 und eine der Funktionen besteht darin, eine Tabelle mit Daten von Teammitgliedern zu füllen.

Um Mitglieder hinzuzufügen, müssen Sie auf eine Schaltfläche klicken und dann ein modales Fenster anzeigen, um die Daten einzugeben und einige Dateien hinzuzufügen. Die Bearbeitungsvorgänge sind identisch.

Ich habe die Daten erfolgreich gespeichert und die Datei in den Serverordner hochgeladen, aber beim Bearbeiten bin ich auf ein Problem gestoßen: Im Dateieingabefeld wird der Name der hochgeladenen Datei nicht angezeigt, es sieht jedoch so aus, als ob keine Datei hochgeladen wurde Tatsächlich bereits hochgeladen.

Ich habe den Namen des Dokuments in einer Mitgliedereigenschaft gespeichert und ngModel verwendet, um das Dateieingabefeld an die Mitgliedereigenschaft zu binden.

Das Eingabefeld zeigt die Meldung „Keine Datei ausgewählt“ und wenn ich versuche, den Dateinamen programmgesteuert im Eingabefeld festzulegen (ich steuere ihn mit ViewChild und ElementRef in einer .ts-Datei), erhalte ich die folgende Fehlermeldung:

core.js:1448 Fehler: Nicht abgefangen (im Versprechen): InvalidStateError: Eigenschaft „value“ kann nicht für „HTMLInputElement“ festgelegt werden: Dieses Eingabeelement akzeptiert einen Dateinamen, der nur programmgesteuert auf die leere Zeichenfolge festgelegt werden kann. Fehler: Das Attribut „value“ von „HTMLInputElement“ konnte nicht festgelegt werden: Dieses Eingabeelement akzeptiert einen Dateinamen, der nur programmgesteuert auf eine leere Zeichenfolge festgelegt werden kann.

Ich verstehe völlig, dass ich dies aufgrund der damit verbundenen Sicherheitsrisiken nicht tun kann, aber ich möchte die Datei nicht programmgesteuert einfügen, sondern nur den Dateinamen anzeigen, nicht ihren Inhalt. Gibt es eine Möglichkeit, dies zu erreichen?

Vielen Dank.

Answer 1

在web 文档中

const input = document.querySelector("input[type=file]");
input.value = "foo";