Angular4 图像上传到 s3 存储桶并将 response.Location 存储到一个全局变量中，该变量可以访问其他 method/function

Question

您好，我正在尝试使用 angular 4 将图像上传到亚马逊 s3 服务器，现在我想从 s3 中获取 returns 作为 url 的 response.Location到一个全局变量，我可以使用当前 response.Location url 访问该变量，但我无法这样做......这是代码
HTML

  <form  (ngSubmit)="onSubmit(e)" #f="ngForm" action="">
       <input type="file" (change)="fileEvent($event)" />
  </form>
  <button (click)="uploadfile(e)">Upload</button>
  <button (click)="saveImage()">save</button>

ts

        import {ImageService} from './image.service';
        import {Image} from './image';

        export class UploadComponent {
           imagefile:any;
           file:any;
           url:any;

        constructor(private serviceSaveimageurl : ImageService) {}

      uploadfile(event) {
        AWS.config.accessKeyId = 'YOUR-ACCESS-KEY';
        AWS.config.secretAccessKey = 'YOU-SECRET-ACCESS-KEY';
        var bucket = new AWS.S3({params: {Bucket: 'YOUR-BUCKET-NAME'}});
        var params = {Key: this.file.name, Body: this.file};
        bucket.upload(params, function (err, s3data) {
           console.log(err, s3data);
           this.url = s3data.Location  // here i want the url to be in this 
                                                                   variable
          });
       }


       fileEvent(fileInput: any){
         var files = fileInput.target.files;
         var file = files[0];
         this.file = file;
       }

      module = new Image()
       saveImage(){
              console.log(this.url) // here i am getting it as undefine 
                                       after i get the s3data.Location need 
                                       help here 
             this.module.imageurl = this.url;
             this.serviceSaveimageurl.addImage(image)
               }

      }

Answer 1

  var objx = bucket.upload(params, function (err, s3data) {
      this.url = s3data;
    });
    this.gobj = objx;
}

fileEvent(fileInput: any){
    var files = fileInput.target.files;
    var file = files[0];
    this.file = file;
}
ImageModel = new CustomizerImages();
saveImage(){

  console.log(this.gobj.url.Location)
}

Answer 2

HTML

<form  (ngSubmit)="onSubmit(f)" #f="ngForm" action="">
  <input type="file" (change)="fileEvent($event)" class="form-control" placeholder="select file" />
</form>

TS

file: any;
awsUrl: string;
uploadfile(event) {
   var creds = {
   bucket: 'bucket name',
   access_key: 'your access key',
   secret_key: 'your secret key',
   region: 'us-west-2'
};
AWS.config.update({
accessKeyId: creds.access_key,
secretAccessKey: creds.secret_key,
region: creds.region
});
var Obj = this; //this of angular comopnent
var S3 = new AWS.S3();
var params = {
   Bucket: creds.bucket,
   Key: this.file.name,
   ContentType: this.file.type,
   Body: this.file,
   ServerSideEncryption: 'AES256',
   ACL: 'public-read'
};
S3.upload(params, function (err, res) {
   if (err) {
      console.log("Error uploading data: ", err);
   } else {
      console.log(res);
      console.log("Successfully uploaded data to myBucket/myKey");
   }
}).send(function (err, response) {
    this.fileName = response.Location; // here you can fetch the location
    Obj.addFiletoDB(response); // to use the url at your component
    return response.Location;
 });
 }
addFiletoDB(response :any) {
   this.awsUrl = response.Location;  
}
fileEvent(fileInput: any) {
    var files = fileInput.srcElement.files;
    var file = files[0];
    this.file = file;
}

Angular4 图像上传到 s3 存储桶并将 response.Location 存储到一个全局变量中，该变量可以访问其他 method/function

Angular4 image upload to s3 bucket and storing the response.Location into a global variable which can be get access to other method/function

amazon-s3

angular2-components

angular