如何解决文件上传input伪路径问题实现图片预览？

你遇到的核心问题是：浏览器为了安全，会把file input的value替换成伪路径（比如C:\fakepath\xxx.jpg），这个路径无法直接作为img的src使用。要实现图片预览，需要利用File API读取选中的文件，生成可访问的临时URL或者Data URL。

原代码问题分析 #

你的当前代码直接将evidence.value赋值给img的src，但这个值是浏览器伪造的路径，并非真实文件路径，所以无法加载图片。

解决方案1：使用URL.createObjectURL（推荐，性能更优） #

这个方法会为选中的文件生成一个临时的Blob URL，浏览器可以直接识别并加载。

修改后的TS代码：

evidenceChange(event: Event) {
  const input = event.target as HTMLInputElement;
  if (!input.files || input.files.length === 0) {
    // 没有选中文件时，恢复默认图片
    const evidenceImg = document.getElementById('evidenceImg') as HTMLImageElement;
    const imgAux = document.getElementById('imgAux') as HTMLImageElement;
    if (evidenceImg && imgAux) {
      evidenceImg.src = imgAux.src;
    }
    return;
  }

  // 获取选中的第一个图片文件
  const file = input.files[0];
  // 生成Blob URL
  const blobUrl = URL.createObjectURL(file);
  
  const evidenceImg = document.getElementById('evidenceImg') as HTMLImageElement;
  if (evidenceImg) {
    evidenceImg.src = blobUrl;
    // 可选：在组件销毁时释放Blob URL，避免内存泄漏
    // this.ngOnDestroy = () => URL.revokeObjectURL(blobUrl);
  }
}

evidenceUpload() {
  const evidenceInput = document.getElementById('evidence') as HTMLInputElement;
  evidenceInput.click();
}

对应的HTML代码（无需修改结构，确保事件传递正确）：

<img id="evidenceImg" (click)="evidenceUpload()" class="imgEvidence" src="/assets/resources/foto/Recurso_25@3x.png">
    
<input (change)="evidenceChange($event)" style="display: none;" type="file" id="evidence" accept="image/png, image/jpeg">

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

如果需要获取图片的Data URL（base64格式），可以用FileReader：

evidenceChange(event: Event) {
  const input = event.target as HTMLInputElement;
  if (!input.files || input.files.length === 0) {
    // 恢复默认图片逻辑同方案1
    const evidenceImg = document.getElementById('evidenceImg') as HTMLImageElement;
    const imgAux = document.getElementById('imgAux') as HTMLImageElement;
    if (evidenceImg && imgAux) {
      evidenceImg.src = imgAux.src;
    }
    return;
  }

  const file = input.files[0];
  const reader = new FileReader();
  
  reader.onload = (e) => {
    const evidenceImg = document.getElementById('evidenceImg') as HTMLImageElement;
    if (evidenceImg) {
      evidenceImg.src = e.target?.result as string;
    }
  };
  
  reader.readAsDataURL(file);
}

更符合Angular风格的写法（使用@ViewChild） #

避免频繁使用document.getElementById，可以用Angular的@ViewChild获取元素：

import { Component, ViewChild, ElementRef, OnDestroy } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent implements OnDestroy {
  @ViewChild('evidenceInput') evidenceInput!: ElementRef<HTMLInputElement>;
  @ViewChild('evidenceImg') evidenceImg!: ElementRef<HTMLImageElement>;
  @ViewChild('imgAux') imgAux!: ElementRef<HTMLImageElement>;
  private blobUrl?: string;

  evidenceChange(event: Event) {
    const input = event.target as HTMLInputElement;
    if (!input.files || input.files.length === 0) {
      this.evidenceImg.nativeElement.src = this.imgAux.nativeElement.src;
      return;
    }

    const file = input.files[0];
    this.blobUrl = URL.createObjectURL(file);
    this.evidenceImg.nativeElement.src = this.blobUrl;
  }

  evidenceUpload() {
    this.evidenceInput.nativeElement.click();
  }

  ngOnDestroy() {
    // 组件销毁时释放Blob URL，防止内存泄漏
    if (this.blobUrl) {
      URL.revokeObjectURL(this.blobUrl);
    }
  }
}

对应的HTML：

<img #evidenceImg (click)="evidenceUpload()" class="imgEvidence" src="/assets/resources/foto/Recurso_25@3x.png">
    
<input #evidenceInput (change)="evidenceChange($event)" style="display: none;" type="file" accept="image/png, image/jpeg">
<img #imgAux style="display: none;" src="/assets/resources/foto/Recurso_25@3x.png">

关键注意点 #

• 必须通过input.files获取真实的File对象，而不是依赖input.value
• 使用URL.createObjectURL后，记得在组件销毁时调用URL.revokeObjectURL释放资源，避免内存泄漏
• 确保input的accept属性限制了图片类型，避免选中非图片文件

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