如何获取input file选中文件的路径？实现表单验证前图片预览

浏览器出于安全限制，不会向前端暴露文件的真实本地物理路径，所以你不需要刻意去获取这个路径——要实现表单验证前的图片预览，直接通过临时预览URL即可，下面针对你的Angular代码给出两种可行方案：

方案一：使用URL.createObjectURL（高效推荐） #

这种方式会生成一个指向文件的临时URL，性能更优，适合图片预览场景：

组件逻辑代码 #

onPreviewCoverSelected(event: Event) {
  const fileInput = event.target as HTMLInputElement;
  if (!fileInput.files?.length) return;

  const selectedFile = fileInput.files[0];
  // 生成临时预览URL
  this.previewImageUrl = URL.createObjectURL(selectedFile);
}

// 组件销毁时记得释放URL，避免内存泄漏
ngOnDestroy() {
  if (this.previewImageUrl) {
    URL.revokeObjectURL(this.previewImageUrl);
  }
}

模板代码（新增预览图片标签） #

<!-- 预览图片 -->
<img *ngIf="previewImageUrl" [src]="previewImageUrl" alt="封面预览" style="max-width: 300px;">

<!-- 文件选择框 -->
<input type="file" class="file-upload" accept="image/png, image/jpeg" (change)="onPreviewCoverSelected($event)">

方案二：使用FileReader（适合需读取文件内容的场景） #

如果需要获取文件的base64格式内容，可以用这种方式：

组件逻辑代码 #

onPreviewCoverSelected(event: Event) {
  const fileInput = event.target as HTMLInputElement;
  if (!fileInput.files?.length) return;

  const reader = new FileReader();
  reader.onload = (loadEvent) => {
    // 读取完成后，result即为base64格式的预览URL
    this.previewImageUrl = loadEvent.target?.result as string;
  };
  // 以DataURL格式读取选中的文件
  reader.readAsDataURL(fileInput.files[0]);
}

模板代码和方案一一致 #

同样使用<img>标签绑定previewImageUrl即可显示预览图。

关键说明 #

• 两种方式生成的URL都是浏览器会话内的临时地址，仅用于当前页面预览，刷新页面后自动失效，完全满足表单验证前的预览需求。
• 浏览器禁止前端直接获取文件真实本地路径是安全机制，无需尝试突破这个限制。

内容的提问来源于stack exchange，提问作者TDev