使用 Angular HTTP PUT 方法将文件/图像上传到 S3 服务器

Question

我正在开发一个 Angular 应用程序，我需要使用 http.put 方法将文件或图像上传到 S3 服务器。我编写了以下代码，但在上传过程中遇到问题。这是我的代码：

uploadFileToS3(fileUrl: string, file: File): Observable<any> {
    const formData = new FormData();
    formData.append('data', file);

    const headers = new HttpHeaders({
        'Content-Type': file.type
    });

    return this.http.put<any>(fileUrl, formData, { headers: headers });
}

网址=链接

但是，当我尝试使用此功能上传文件时，我收到一条响应，指出“该请求没有可用数据”。我也尝试过在标题中设置内容类型，但似乎不起作用。

有人可以指导我如何解决这个问题并使用 Angular 的 HTTP PUT 方法成功地将文件或图像上传到 S3 服务器吗？在标头或格式化请求方面，我需要考虑什么具体内容吗？ 当我尝试下载或查看此文件时，它显示问题

上传文件到s3的代码

uploadFileToS3(fileUrl, file) {
        var formData = new FormData();
        formData.append('data', file);

        const headers = new HttpHeaders({
            'Content-Type': "multipart/form-data"
        });

        return this.http.put<any>(fileUrl, formData, {
            responseType: 'text' as 'json'
        });
}

提前感谢您的帮助！

Answer 1

要实现您的目标，您需要满足以下条件：

在您的组件上，有一个从表单获取文件的函数：

onFileSelected(event: any) {
  const file: File = event.target.files[0];
  if (file) {
    this.http.put(url, file, {
      headers: {
        'Content-Type': file.type
      },
      reportProgress: true,
      observe: 'events'
    }).subscribe({
      next: (event) => {
        console.log(event); // Handle the upload progress
      },
      error: (error) => {
        console.error('Upload failed:', error);
      },
      complete: () => {
        console.log('Upload complete');
      }
    });
}

现在在您的模板上，如下所示：

<input type="file" (change)="onFileSelected($event)">

一些重要注意事项：

1. 如您所见，虽然可以将文件从浏览器直接发送到 s3 存储桶，但这是非常不安全且不好的做法。在这里，我们假设您的存储桶是完全公开的，并且将接受任何人的上传，除非您的应用程序是非公开应用程序并且客户端已允许访问存储桶（这在技术上可以通过例如直接连接或到 vpc 的 vpn 连接，以及到 s3 的网关)。
2. 实现此目的的更合适方法是：a）让后端处理请求（身份验证、授权和验证），然后转发到 s3 存储桶； b) 有一个后端函数 - 比如 lambda - 为 s3 存储桶返回一个 预签名 url