使用预签名 url 将文件上传为二进制数据

Question

我想使用预签名 url 将文件作为二进制数据上传。我确实尝试通过邮递员上传，请参考下面的屏幕截图并能够上传。

在邮递员中上传

我尝试使用 Angular 13 中的以下示例代码，但它总是作为表单数据而不是二进制上传。

formData.append('data', this.uploadFile[0]);
        const req = new HttpRequest('PUT', resUrl, formData, {
          reportProgress: true,
          // params:setParams
        });
        this.isUploading = true;
        this.httpc.request(req).
          pipe(takeUntil(this.uploadSubscribe))
          .subscribe((event: any) => {
            // Via this API, you get access to the raw event stream.
            // Look for upload progress events.
            if (event.type === HttpEventType.UploadProgress) {
              // This is an upload progress event. Compute and show the % done:
              // this.logger.log(`total = ${event.total}, loaded = ${event.loaded}`);
              const percentDone = Math.round(100 * event.loaded / event.total);
              this.uploadPercent = percentDone;
              this.totalFileSize = this.formatBytes(event.total);
              this.uploadedFileSize = this.formatBytes(event.loaded);
              console.log("Upload progress >> ", percentDone, this.totalFileSize, this.uploadedFileSize);
            } else if (event instanceof HttpResponse) {
              // this.processPostUploadResp(event, blacklisted, writeLogPayload);
              console.log('Uploaded >> ', event);
            } else {
              // this.isUploading = false;
            }
          },
            (error) => {
              if (error instanceof HttpErrorResponse) {
                // In case of ipa file upload, if user uploads expired ipa file(Provisioning profile expired) then upload server returns 400 error
                if (this.data.uploadType === 'PP') {
                  this.snackBar.open(error.error['result'] || CONSTANTS.PP_EXPIRED, '', {
                    duration: 4000
                  });
                } else if (this.data.uploadType === 'IPA') {
                  this.snackBar.open(error.error['message'] || CONSTANTS.IPA_EXPIRED, '', {
                    duration: 4000
                  });
                } else {
                  this.snackbar.open(`${error.message}`, 'Info', {
                    duration: 6000
                  });
                }
                this.writeLog(writeLogPayload, config.FAILED_TO_UPLOAD, event['error'] || 'Error in uploading file');
                this.logger.log('Error in upload apk >> ', error);
                this.isUploading = false;
                this.clearUpload();
              }
            });```

How can we achieve uploading file as binary data?


  [1]: https://i.sstatic.net/tNnRA5yf.png

Answer 1

这里是上传生成预签名 url 并将文件上传到 AWS S3 的示例

.html 文件

// for images
   <input
      type="file"
      accept="image/webp,image/png,image/jpeg"
      (change)="onFileSelected($event, 'image')"
      #imageUpload
    />
    // For files
    <input
      type="file"
      (change)="onFileSelected($event, 'file')"
      #attachmentUpload
    />

.ts 文件

onFileSelected(event: any, fileType: string) {
    this.file_loading = true
    this.file = event.target.files[0];

    if (this.file) {
      const image_paylaod =
      {
        files_source: "direct_message",
        files: [{
          id: Date.now(),
          name: this.file.name,
        }]
      }


      const formData = new FormData();
      formData.append("thumbnail", this.file);

      // To display image
      var reader = new FileReader();
      reader.readAsDataURL(this.file);
      reader.onload = (_event) => this.image = reader.result;

      this.fileService.generatePresignedUrls(image_paylaod)
        .pipe(
          map((res: any) => res.presigned_urls[0]),
          switchMap(
            (res: any) => {
              const type = res.media_type
              const url = res.url
              return this.fileService.uploadfileAWSS3(url, type, this.file)
            })
        ).subscribe(
          (res) => this.file_loading = false,
          (err) => this.file_loading = false,
        )

    }
  }

文件服务.ts

  generatePresignedUrls(payload: any) {
    return this.http.post(`${environment.API_URL}media/generatePresignedUrls`, payload)
  }

  uploadfileAWSS3(fileuploadurl: any, contenttype: any, file: any) {
    const headers = new HttpHeaders({ skip: "true" });
    const req = new HttpRequest(
      'PUT',
      fileuploadurl,
      file,
      {
        headers: headers,
      }
    );
    return this.http.request(req);
  }