bootstrap4输入文件上载不会在输入中显示已上载的文件名?？如何使用angular解算

问题：bootstrap4输入文件上载不会在输入中显示已上载的文件名？如何使用angular解决？

答案： 在Bootstrap 4中，文件输入字段（input type="file"）默认情况下不会在输入框中显示已上载的文件名。这是出于安全性和隐私的考虑，以防止攻击者通过修改文件名来欺骗用户。

要解决这个问题，可以使用Angular来实现文件名的显示。下面是一种可能的解决方案：

1. 在HTML模板中，使用Bootstrap 4的文件输入字段，并添加一个隐藏的文本输入字段来显示文件名：

<div class="custom-file">
  <input type="file" class="custom-file-input" id="inputFile" (change)="onFileSelected($event)">
  <label class="custom-file-label" for="inputFile">{{ selectedFileName }}</label>
</div>

1. 在组件的Typescript代码中，实现onFileSelected方法来获取用户选择的文件，并更新selectedFileName变量：

selectedFileName: string;

onFileSelected(event: any) {
  const file: File = event.target.files[0];
  this.selectedFileName = file.name;
  // 可以在这里执行其他操作，如上传文件等
}

通过上述代码，当用户选择文件后，文件名将显示在label元素中。

需要注意的是，这只是一种解决方案，具体实现可能因项目需求而有所不同。在实际开发中，您可能需要根据具体情况进行适当的调整和扩展。

关于Angular的更多信息和教程，您可以参考腾讯云的Angular产品介绍页面：Angular - 腾讯云。