无法从数据库上传和检索文件答案

【问题标题】：Unable to upload and retreive file from the database无法从数据库上传和检索文件
【发布时间】：2018-12-05 22:08:58
【问题描述】：

我正在尝试为软件应用程序的服务器部分发布的每门课程上传文件，并且 Firebase 已用作此应用程序的数据库。
从设备存储中选择文件并在文本字段中提供相关deail并单击发布按钮后，课程将被发布并将选择的文件转换为链接并存储在数据库中
尝试从预期课程的培训部分检索上传的文件时，它显示为清理不安全的 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>

【问题讨论】：

标签： html typescript firebase firebase-realtime-database angular5

【解决方案1】：

您需要使用DomSanitizer的bypassSecurityTrustUrl方法使角度信任url

您可以在服务中创建一个通用方法以在整个应用程序中使用，因为您可能需要在应用程序的多个组件中使用此方法。

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>

您也可以在 sports_training 组件中创建 sanitize 方法，但我建议使用通用服务

【讨论】：