Невозможно загрузить и получить файл из базы данных

Question

• Я пытаюсь загрузить файлы для каждого курса, опубликованного разделом Сервер программного обеспечения, и Firebase использовалась в качестве базы данных для этого приложения.
• После выбора файлов с устройства «Хранилище» и указания соответствующих текстовых полей и нажатия кнопки «Опубликовать» курс публикуется, а выбранный файл преобразуется в ссылку и сохраняется в базе данных
• при попытке извлечь загруженный файл из раздела обучения для намеченного курса, он отображается как дезинфицирующий небезопасный URL-адрес и неспособный увидеть файл
• Я приложил код для вышеуказанной реализации. Пожалуйста, предоставьте ваше предложение продолжить для того же

Server.component.html

<label for="user_data">Upload file</label>
      <input type="file" multiple formControlName="file" class="form-control" id="file" (change)=uploadFile($event) accept=".pdf,.docx" required>

Server.component.ts

uploadFile(event) {
        let Sport_files = event.target.files;
        if (Sport_files > 0) {
          console.log(this.sports_videoForm.value.file); // You will see the file link
          this.dataService.uploadFile(this.sports_videoForm.value.file);
        }

SportsData.service.ts (реализация компонента службы)

uploadFile(file) {
        let formData: FormData = new FormData();
        formData.append('file', file, file.name);

        this.http.post("http://localhost:/4200/", formData)
      }

получение файла в разделе обучения для запланированного курса, sports_training.component.html

<a href="{{item.file}}" target="_blank" class="col-sm-4" style="padding-bottom: 10px">uploaded file</a>

Answer 1

Вам нужно сделать так, чтобы URL-адрес доверял, используя bypassSecurityTrustUrl метод DomSanitizer

Вы можете создать общий метод в службе для использования во всем приложении, поскольку вам может потребоваться это в нескольких компонентах приложения.

common.service.ts:

import { DomSanitizer } from '@angular/platform-browser';

...

constructor(private domSanitizer: DomSanitizer) {}

sanitize(url: string){
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

sports_training.component.html:

<a [href]="commonService.sanitize(item.file)" target="_blank" class="col-sm-4" style="padding-bottom: 10px">uploaded file</a>

Вы также можете создать метод sanitize в своем компоненте sports_training, но я рекомендую использовать общий сервис