以编程方式在文件输入中显示文件名：使用Angular实现

Question

晚上好，

我正在使用Angular15开发一个应用程序，其中一个功能是填充一个包含团队成员数据的表格。

要添加成员，需要点击一个按钮，然后显示一个模态窗口来填写数据并添加一些文件。编辑操作也是一样的。

我已经成功保存了数据并将文件上传到服务器文件夹，但是在编辑时我遇到了一个问题：在文件输入框中，上传的文件名不显示，看起来好像没有上传任何文件，尽管实际上已经上传了。

我将文档的名称存储在一个成员属性中，并使用ngModel将文件输入框与成员属性绑定。

输入框显示“未选择文件”的消息，如果我尝试在输入框上以编程方式设置文件名（我在.ts文件中使用ViewChild和ElementRef进行控制），我会得到以下错误：

core.js:1448 错误错误：未捕获（承诺中）：InvalidStateError：无法在“HTMLInputElement”上设置“value”属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。错误：无法设置“HTMLInputElement”的“value”属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。

我完全理解我不能进行这个操作，因为它涉及到的安全风险，但是我不想以编程方式插入文件，我只想显示文件名，而不显示其内容。有没有办法实现这个目的？

谢谢。

Answer 1

在web 文档中

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