AWS-SDK 将图像从 Angular App 上传到 S3 Bucket 的问题

Question

一年多后在一个新项目中尝试this，我在实施它的过程中遇到了一系列问题。首先，当我运行“nom install aws-sdk”时，出现以下错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @agm/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"15.2.2" from @angular/[email protected]
npm ERR!   node_modules/@angular/forms
npm ERR!     @angular/forms@"^15.2.2" from the root project
npm ERR!   peer @angular/common@"^15.0.0 || ^16.0.0" from @angular/[email protected]
npm ERR!   node_modules/@angular/google-maps
npm ERR!     @angular/google-maps@"^15.2.2" from the root project
npm ERR!   5 more (@angular/platform-browser, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^6.0.0 || ^7.0.0 || ^8.0.0" from @agm/[email protected]
npm ERR! node_modules/@agm/core
npm ERR!   @agm/core@"^1.1.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^6.0.0 || ^7.0.0 || ^8.0.0" from @agm/[email protected]
npm ERR!   node_modules/@agm/core
npm ERR!     @agm/core@"^1.1.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

我已经用 AGM-Core 实现了一个地图组件，但我认为它与 S3 没有任何关系。我尝试按照建议并使用“--legacy-peer-deps”安装 aws-sdk，并继续执行上传派生等步骤，并在我的模块和组件中实现它。

我的上传服务中的代码是：

import { Injectable } from '@angular/core';
import * as AWS from 'aws-sdk/global';
import * as S3 from 'aws-sdk/clients/s3';

@Injectable({
  providedIn: 'root'
})
export class UploadService {

  constructor() { }

  uploadImage(file: any) {
    const contentType = file.type;
    const bucket = new S3({
      accessKeyId: '',
      secretAccessKey: '',
      region: 'me-south-1'
    });
    const fileName = 'images/' + file.name;
    const params = {
      Bucket: 'images',
      Key: fileName,
      Body: file,
      ACL: 'public-read',
      ContentType: contentType
    };
    bucket.upload(params, function(err: any, data: any){
      if (err) {
        console.log('There was an error uploading your file: ', err);
        return false;
      }
      console.log('Successfully uploaded file.', data);
      return true;
    });
    //for upload progress   
    /*bucket.upload(params).on('httpUploadProgress', function (evt) {
        console.log(evt.loaded + ' of ' + evt.total + ' Bytes');
      }).send(function (err, data) {
      if (err) {
        console.log('There was an error uploading your file: ', err);
        return false;
      }
      console.log('Successfully uploaded file.', data);
      return true;
    });*/
  }

  uploadDoc(file: any) {
    const contentType = file.type;
    const bucket = new S3({
      accessKeyId: '',
      secretAccessKey: '',
      region: 'me-south-1'
    });
    const fileName = 'documents/' + file.name;
    const params = {
      Bucket: 'images',
      Key: fileName,
      Body: file,
      ACL: 'public-read',
      ContentType: contentType
    };
    bucket.upload(params, function(err: any, data: any){
      if (err) {
        console.log('There was an error uploading your file: ', err);
        return false;
      }
      console.log('Successfully uploaded file.', data);
      return true;
    });
    //for upload progress   
    /*bucket.upload(params).on('httpUploadProgress', function (evt) {
        console.log(evt.loaded + ' of ' + evt.total + ' Bytes');
      }).send(function (err, data) {
      if (err) {
        console.log('There was an error uploading your file: ', err);
        return false;
      }
      console.log('Successfully uploaded file.', data);
      return true;
    });*/
  }
}

它在我的 component.ts 文件中的实现，在延迟加载的模块中是：

import { Component } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { UploadService } from 'src/app/services/upload/upload.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {

  imageSrc: string[] = [];
  selectedFileToUpload = new File([""], "img");
  errMes: string = '';

  constructor(private router: Router, private route: ActivatedRoute, private uploadService: UploadService) { 
}


  onFileChange(event: any, index: number) {
    var filesList: FileList = event.target.files;
    const reader = new FileReader();

    if(event.target.files && event.target.files.length) {
      const fileToUpload: any = filesList.item(0);
      console.log(fileToUpload.name);
      const imgNm: string = fileToUpload.name;
      console.log(imgNm);
      reader.readAsDataURL(fileToUpload);
      reader.onload = () => {
          this.imageSrc.push(reader.result as string); 
          this.profileForm.patchValue({
            //image: reader.result
            image: imgNm
          });
      };
      this.selectedFileToUpload = fileToUpload;
    }
  }

  uploadImage() {
    if (!this.selectedFileToUpload) {
      alert('Please select a file first!'); // or any other message to the user to choose a file
      return;
    } else {
      console.log('attempt to upload')
      this.uploadService.uploadImage(this.selectedFileToUpload);
    }
  }

  submitForm() {
    console.log(this.profileForm.value)
  } 
}

一旦我保存并执行代码，有时我会在“this.uploadService.uploadImage(this.selectedFileToUpload);”处收到错误消息说

this.uploadService 没有函数 uploadImage()

或者当我尝试导航到该组件时，我得到一个包含错误的空白屏幕：

ERROR Error: Uncaught (in promise): ReferenceError: global is not defined
ReferenceError: global is not defined
    at 90496 (index.js:43:30)
    at __webpack_require__ (bootstrap:19:1)
    at 94566 (browserHashUtils.js:1:14)
    at __webpack_require__ (bootstrap:19:1)
    at 20415 (browserHmac.js:1:17)
    at __webpack_require__ (bootstrap:19:1)
    at 9175 (browserCryptoLib.js:1:12)
    at __webpack_require__ (bootstrap:19:1)
    at 55031 (browser_loader.js:4:19)
    at __webpack_require__ (bootstrap:19:1)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at core.mjs:23864:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:23864:36)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Object.onInvokeTask (core.mjs:24165:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)

ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'ProfilesModule' before initialization
ReferenceError: Cannot access 'ProfilesModule' before initialization
    at Module.ProfilesModule (dashboard.component.html:103:55)
    at app-routing.module.ts:12:82
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:24178:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at core.mjs:23864:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:23864:36)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at core.mjs:23864:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:23864:36)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Object.onInvokeTask (core.mjs:24165:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)

此类错误仅在我尝试在组件中实现服务时出现。我该如何解决这个问题并继续前进？