Angular图片上传问题：获取C:\fakepath及不安全URL sanitize警告

我需要将本地硬盘的图片上传到Angular页面，在轮播组件中展示。目前用假数据测试前端，暂不保存到数据库，后续将配合.NET API使用。

当前遇到的问题：选择图片点击提交后，控制台显示C:/fakepath/文件名.png，同时出现“Sanitizing unsafe url”警告；轮播虽新增条目，但图片因路径错误无法显示。尝试过DomSanitizer但未成功，应为实现方式有误。

解决方案 #

浏览器出于安全限制，不会暴露真实本地文件路径，因此不能直接使用C:/fakepath/xxx作为图片源。正确做法是将本地文件转换为Object URL（临时可访问URL）或Base64字符串，再绑定到img标签。以下是分步修改方案：

1. 修正图片表单组件，获取文件并生成有效URL #

修改image-form.component.ts，监听文件选择事件，生成可访问的Object URL：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ImagesService } from 'src/app/services/images.service';

@Component({
  selector: 'app-image-form',
  templateUrl: './image-form.component.html',
  styleUrls: ['./image-form.component.css']
})
export class ImageFormComponent implements OnInit {

  imageForm = this.formBuilder.group({
    description: ['']
  });
  @ViewChild('imageChooser') imageChooser!: ElementRef<HTMLInputElement>;
  selectedFile: File | null = null;
  fileUrl: string | null = null;

  constructor(private formBuilder: FormBuilder, private imageService: ImagesService) { }

  ngOnInit(): void {
  }

  onFileChange(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files[0]) {
      this.selectedFile = input.files[0];
      // 生成临时可访问的Object URL
      this.fileUrl = URL.createObjectURL(this.selectedFile);
    }
  }

  onSubmit(event: any): void {
    event.preventDefault();
    if (this.selectedFile && this.fileUrl) {
      this.imageService.saveImage({
        file: this.selectedFile,
        url: this.fileUrl,
        description: this.imageForm.value.description || '',
        name: this.selectedFile.name
      });
      // 重置输入框
      this.imageChooser.nativeElement.value = '';
      this.selectedFile = null;
      this.fileUrl = null;
    }
  }
}

修改image-form.component.html，添加文件变化事件监听与模板引用：

<div class="container text-center mt-5">
    <form [formGroup]="imageForm" (ngSubmit)="onSubmit($event)">
        <div class="row align-items-start">
            <div class="col"></div>
            <div class="col">
                <input type="file"
                 name="image_chooser"
                 id="image_chooser" 
                 #imageChooser
                 accept="image/jpeg, image/png"
                 (change)="onFileChange($event)">
            </div>
            <div class="col"></div>
        </div>   

        <div class="row align-items-start">
            <div class="col-11">
                <label for="image_description">Description:</label>
                <input type="text"
                 name="image_description" 
                 id="image_desctription" 
                 formControlName="description">
            </div>
            <div class="col-1"></div>
        </div>   


        <div class="row align-item-center">
            <div class="col">
                <button type="submit" class="btn btn-primary" [disabled]="!selectedFile">Save</button>
            </div>
        </div>
    </form> 
</div>

2. 调整图片服务，存储有效URL信息 #

修改images.service.ts，更新保存逻辑，存储生成的Object URL：

import { Injectable } from '@angular/core';
import { IMAGES } from 'src/fake_data/FakeImages';
import { Image } from 'src/interfaces/IImage';

@Injectable({
  providedIn: 'root'
})
export class ImagesService {

  private _fakeImages: Image[] = IMAGES;

  constructor() { }

  getImages(): Image[] {
    return this._fakeImages;
  }

  saveImage(imageData: any): void {
    const image: Image = {
      ImageId: this._fakeImages.length + 1,
      Name: imageData.name,
      Extension: imageData.file.type.split('/')[1],
      Description: imageData.description,
      Path: imageData.url
    };
    this._fakeImages.push(image);
  }
}

3. 轮播组件保持原有逻辑即可 #

images-carousel.component.ts和对应的HTML无需额外修改，此时image.Path为有效的Object URL，可直接通过[src]="image.Path"绑定展示。

关键说明 #

• C:/fakepath/xxx是浏览器的安全保护机制，无法绕过，必须通过Object URL或Base64转换实现本地图片预览。
• Object URL是临时URL，若需长期存储，可将文件转换为Base64字符串存入服务。
• 后续对接.NET API时，可直接将File对象通过FormData上传，无需处理路径问题。

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