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

您需要使用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方法，但是我建议您使用通用服务

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

1 个答案: