Paparkan nama fail secara pemrograman dalam input fail: Dilaksanakan menggunakan Angular

Question

Selamat petang,

Saya sedang membangunkan aplikasi menggunakan Angular15 dan salah satu fungsinya adalah untuk mengisi jadual dengan data ahli pasukan.

Untuk menambah ahli, anda perlu mengklik butang dan kemudian menunjukkan tetingkap modal untuk mengisi data dan menambah beberapa fail. Operasi penyuntingan adalah sama.

Saya telah berjaya menyimpan data dan memuat naik fail ke folder pelayan, tetapi semasa mengedit saya menghadapi masalah: dalam kotak input fail, nama fail yang dimuat naik tidak muncul, nampaknya tiada fail telah dimuat naik, walaupun sebenarnya Sudah dimuat naik.

Saya menyimpan nama dokumen dalam harta ahli dan menggunakan ngModel untuk mengikat kotak input fail ke harta ahli.

Kotak input menunjukkan mesej "Tiada fail dipilih" dan jika saya cuba menetapkan nama fail secara pengaturcaraan pada kotak input (saya mengawalnya menggunakan ViewChild dan ElementRef dalam fail .ts) saya mendapat ralat berikut:

core.js:1448 Ralat: Tidak ditangkap (dalam janji): InvalidStateError: Tidak dapat menetapkan sifat 'nilai' pada 'HTMLInputElement': Elemen input ini menerima nama fail, yang hanya boleh ditetapkan secara atur cara kepada rentetan kosong . Ralat: Tidak dapat menetapkan atribut 'nilai' bagi 'HTMLInputElement': Elemen input ini menerima nama fail, yang hanya boleh ditetapkan secara atur cara kepada rentetan kosong.

Saya faham sepenuhnya bahawa saya tidak boleh melakukan ini kerana risiko keselamatan yang terlibat, tetapi saya tidak mahu memasukkan fail secara pemrograman, saya hanya mahu memaparkan nama fail, bukan kandungannya. Adakah terdapat cara untuk mencapai ini?

Terima kasih.

Answer 1

Dalam dokumentasi web

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