如何使用 Angular-Ionic 从 AWS 存储库下载图像答案

【问题标题】：How to download image from AWS repository using Angular-Ionic如何使用 Angular-Ionic 从 AWS 存储库下载图像
【发布时间】：2020-06-09 14:41:11
【问题描述】：

我正在尝试以下操作：我需要下载一张图片，但要下载它，我需要从后端获取一个 url。该 url 来自存储图像的 AWS 存储库。

我的后端（使用 Laravel 制作）工作正常，但我的问题是尝试从我的 angular-ionic 应用程序下载图像。

我的代码如下：

诊所测试.page.ts：

import {Component} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {ClinicTestService} from '../../../../providers/services/api/clinic-test.service';
import {ClinicTest} from '../../../../models/ClinicTest';

@Component({
    selector: 'app-clinic-test',
    templateUrl: './clinic-test.page.html',
    styleUrls: ['./clinic-test.page.scss'],
})
export class ClinicTestPage {
    clinicTest: ClinicTest;
    clinicTestFileUrl: string;

    constructor(private activatedRoute: ActivatedRoute,
                private clinicTestService: ClinicTestService) {
    }

    ionViewWillEnter() {
        const clinicTestId = this.activatedRoute.snapshot.paramMap.get('test-id');
        this.clinicTestService.getClinicTest(clinicTestId).subscribe(
            clinicTest => this.clinicTest = clinicTest
        );
    }

    getClinicTestFile() {
        this.clinicTestService.getClinicTestFile().subscribe(
            clinicTestFileUrl => this.clinicTestFileUrl = clinicTestFileUrl
        );
    }
}

我的 getClinicTestFile() 函数在我的 clinic-test.service.ts 中调用另一个函数，如下所示：

getClinicTestFile() {
  const urlMock = `${this.baseUrl}/${MOCK_CLINIC_TEST_ID}/{s3_clinic_file_id}/download`;

  return this.httpClient.get(urlMock, {responseType: 'text'});
}

它总是返回相同的测试 url ('https://sghvr.s3.us-east-2.amazonaws.com/aATecub3Epkwu1AcDGVgHIcWi1SrZCW9wkYtkTJU')。我已经在 Postman 上测试了该网址，我可以看到图片。

在我的 html 代码中，我有以下内容：

<ion-content>
    <ion-grid class="ion-no-padding">
        <ion-row>
            <ion-col offset-md="3" size-md="6">
                <ion-button (click)="getClinicTestFile()">Descarga Imagen</ion-button>
            </ion-col>
        </ion-row>
        <br>
        <ion-img src="{{clinicTestFileUrl}}"></ion-img>
        <br>
        <ion-row>
            <ion-col offset-md="3" size-md="6">
                <ion-label>
                    <h1><b>Paciente: </b>{{clinicTest?.patient.user.name}} {{clinicTest?.patient.user.surname}}</h1>
                    <br>
                </ion-label>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

在上面的代码中，我试图在元素上显示图像。

好吧，当我单击按钮下载图像元素时，会在 src 上正确获取测试 url，但我的控制台上出现以下错误：

GET https://sghvr.s3.us-east-2.amazonaws.com/aATecub3Epkwu1AcDGVgHIcWi1SrZCW9wkYtkTJU 403 (Forbidden)

嗯，我需要这两点帮助：

为什么我的控制台上出现该错误？
如何使用 aws url 下载我的图像？我一直在寻找，但没有成功。

很抱歉问这些简单的问题，但我还不太习惯 Angular-Ionic。

欢迎任何提示！

谢谢！

【问题讨论】：

可能是这个原因，但是我怎么在 Postman 上看到呢？无论如何，如果您需要授权，它如何显示？感谢您的帮助！
现在我看到在我的邮递员中我有 accesskey 和 secretkey :S 我要在测试期间公开我的 raws 存储库
原来是第一个问题，公开我可以看到，但是怎么下载呢？

标签： angular amazon-web-services amazon-s3 download ionic4

【解决方案1】：

why do I'm having that error on my console?

错误很明显，表明您无权访问该文件。如果您直接访问 URL，您会看到“拒绝访问”。使用您必须下载文件或将其公开的访问密钥。这取决于您的要求，但要理解一件事至关重要。 FRONT-END 上的访问密钥可供所有用户使用，这是一个安全漏洞。你需要的是使用你的后端。使用您的访问密钥在 LARAVEL 中获取图像并将其发送回您的 FRONT-END。

下载图片：将download 属性添加到您的链接：

<a href="link_of_the_image" target="_self" download>Download</a>

该属性下载链接的文件而不是导航到它。在此处查看浏览器支持： https://www.w3schools.com/tags/att_a_download.asp

【讨论】：