Angular 13中获取图片真实路径：如何解决FakePath问题？

我在使用Angular 13开发时，需要获取文件输入框中图片的实际路径，但通过事件获取到的是FakePath而非真实路径，该如何解决？

相关代码 #

TypeScript #

this.registerForm = new FormGroup({
  imageUrl: new FormControl('', Validators.required)
});

submitForm(user: User){
  user.imageUrl = this.registerForm.get('imageUrl').value;
}

fileChangeEvent(e){
  if (e.target.files && e.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (e: any) => {
      this.user.imageUrl = e.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
  }
}

HTML #

<div>
  <input type="file" (change)="fileChangeEvent($event)" formControlName="imageUrl">
  <img [src]="user.imageUrl" alt="" height="40px">
</div>

数据库示例 #

解决方案 #

首先明确：浏览器出于安全限制，不会向网页暴露本地文件的真实路径，所以你拿到的FakePath是正常现象，不要试图获取本地真实路径，而是通过以下两种方式处理图片：

1. 优化本地预览逻辑 #

你当前的fileChangeEvent已经通过FileReader将图片转为Data URL实现了本地预览，但表单控件绑定imageUrl的逻辑存在问题（表单只能拿到FakePath），可以优化：

• 移除formControlName="imageUrl"，因为表单控件不需要绑定文件路径
• 直接通过FileReader生成的Data URL绑定到<img>用于预览

优化后的TypeScript代码：

this.registerForm = new FormGroup({
  // 若无需提交路径，可移除imageUrl控件；若要提交文件，改用FormData处理
});

fileChangeEvent(e: Event) {
  const target = e.target as HTMLInputElement;
  if (target.files && target.files[0]) {
    const reader = new FileReader();
    reader.onload = (e: ProgressEvent<FileReader>) => {
      this.user.imageUrl = e.target?.result as string;
    };
    reader.readAsDataURL(target.files[0]);
  }
}

优化后的HTML代码：

<div>
  <input type="file" (change)="fileChangeEvent($event)" accept="image/*">
  <img [src]="user.imageUrl" alt="图片预览" height="40px">
</div>

2. 提交图片到后端存储 #

如果需要将图片存储到数据库，不能直接存本地路径（其他用户无法访问），正确做法是：

• 使用FormData将文件对象提交到后端
• 后端接收文件后，保存到服务器存储目录，或转为Base64格式存入数据库（如你提供的数据库示例格式）

示例提交代码：

submitForm() {
  const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
  if (fileInput.files && fileInput.files[0]) {
    const formData = new FormData();
    formData.append('userAvatar', fileInput.files[0]); // 'userAvatar'为后端接收的参数名

    // 调用HTTP服务提交文件
    this.http.post('/api/user/upload-avatar', formData).subscribe(res => {
      // 后端返回文件存储路径或Base64字符串，赋值给user.imageUrl
      this.user.imageUrl = res.imageUrl;
      // 后续将user信息保存到数据库
    });
  }
}

关键提示 #

• 浏览器的安全策略禁止网页访问本地文件系统的真实路径，永远不要尝试获取本地真实路径，这是不可行的
• 本地预览优先用FileReader生成Data URL或URL.createObjectURL生成临时URL
• 上传到后端必须用FormData传递文件对象，由后端统一处理存储逻辑

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