Angular 图像文件上传问题：接收“C：\fakepath”并清理不安全的 URL

问：

我想将一个简单的图像从我的硬盘上传到我的 Angular 页面，以便显示到轮播中。 我在 .Net 中有一个 API，我假装与 Angular 一起使用，但在那一刻，我只用假数据测试我在 Angular 中的前端页面，我现在不将其保存在任何数据库中。

我的问题是我需要文件的路径才能将其用于组件中的 img 标签元素。但是每次我选择图像并单击提交按钮时，控制台都会显示 C：/fakepath/thefile.png，并给我有关“清理不安全 url”的警告，轮播会添加一个新的“图像”，但这不会显示，因为路径不正确。

我用 DomSanitizer 等尝试了很多方法，但没有任何效果，或者我没有在我的代码中正确实现，我不知道。

我的前端存储库：https://github.com/diegorus92/Frontend-ImageCollection/tree/develop 我的后端存储库（如有必要）：https://github.com/diegorus92/Backend-ImageCollection/tree/develop

图像表单模板 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" 
                 accept="image/jpeg, image/png"
                 formControlName="imageFile">
            </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">Save</button>
            </div>
        </div>
    </form> 
</div>

图像表单组件 TS

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } 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({
    imageFile: [],
    description: ['']
  });

  fileInput:any;

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

  ngOnInit(): void {

  }



  onSubmit(event:any):void{
    event.preventDefault();

    console.log(this.imageForm.value['imageFile']);

    this.imageService.saveImage(this.imageForm.value);
  }
}

图片轮播模板 HTML

<div class="container-sm text-center">
  <div class="row align-items-center">
    <div class="col"></div>
    <div class="col">
      <ngb-carousel *ngIf="images" >
        <ng-template ngbSlide *ngFor="let image of images">
          <div class="picsum-img-wrapper">
            <img [src]="image.Path" alt={{image.Name}}>
            <!--<img src="./assets/img/test.jpg" alt={{image.Name}}/>-->
          </div>
          <div class="carousel-caption">
            <h3>{{image.Name}}</h3>
            <p>{{image.Description}}</p>
            <i class="bi bi-pencil-fill"></i>
            <i class="bi bi-trash3-fill"></i>
          </div>
        </ng-template>
      </ngb-carousel>
    </div>
    <div class="col"></div>
  </div>
</div>


<!--<div class="row">
    <div class="col"></div>
    <div class="col-6">
        <div id="carouselExampleCaptions" class="carousel slide">
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner" *ngIf="images">
              <div class="carousel-item active" *ngFor="let image of images">
                <img [src]="image.Path" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>{{image.Name}}</h5>
                  <p>{{image.Description}}</p>
                  <i class="bi bi-pencil-fill"></i>
                  <i class="bi bi-trash3-fill"></i>
                </div>
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
        </div>
        <div class="col"></div>
</div>-->

图片轮播组件 TS

import { Component, OnInit } from '@angular/core';
import { ImagesService } from 'src/app/services/images.service';
import { Image } from 'src/interfaces/IImage';
import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
import { DomSanitizer } from '@angular/platform-browser';

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

  images:Image[]=[];

  constructor(private imageService:ImagesService, private sanitizer:DomSanitizer) { }

  

  ngOnInit(): void {
    this.getImages();

    console.log(this.images);
  }
   

  getImages(){
    this.images = this.imageService.getImages();
  }

}

影像服务 TS

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

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

  private _fakeImages:Image[] = IMAGES;

  constructor(private sanitizer:DomSanitizer) { }

  getImages(){
    return this._fakeImages;
  }

  saveImage(newImage:any):void{
    console.log(newImage);
    const image:Image = {
      ImageId: 0,
      Name: "",
      Extension: "jpg",
      Description: newImage.description,
      Path: newImage.imageFile
    }
    console.log(image);
    this._fakeImages.push(image);
  }

}

谢谢你:)

我尝试将图像从我的硬盘上传到我在 Angular 中的简单页面