Question

我正在使用这种方法将图像上传到AWS s3存储桶： https://grokonez.com/aws/angular-4-amazon-s3-example-how-to-upload-file-to-s3-bucket

这可以单独完成，但就我所依赖的结果而言，由于异步行为，它可能会在稍后出现。我希望在确认后立即执行下一个任务。

upload() {
      let file: any;
      // let urltype = '';
      let filename = '';
      // let b: boolean;
      for (let i = 0 ; i < this.urls.length  ; i++) {
        file = this.selectedFiles[i];
        // urltype = this.urltype[i];
        filename = file.name;
        const k = uuid() + '.' + filename.substr((filename.lastIndexOf('.') + 1));
        this.uploadservice.uploadfile(file, k);
        console.log('done');
        // console.log('file: ' + file + ' : ' + filename);
        // let x = this.userservice.PostImage('test', file);
         // console.log('value of ' + x);
      }
      // return b;
     }

文件上传服务：

bucket.upload(params, 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;
    }).promise();
  }

在这里，完成操作在文件上传完成之前执行。

Answer 1

我认为您应该查看异步编程教程，并尝试使用简单的超时尝试几个示例，以掌握其窍门，然后继续处理诸如s3和aws之类的更复杂的东西。

这是我建议您开始的旅程：

1）学习使用纯JS进行异步编程的基本概念 https://eloquentjavascript.net/11_async.html

2）使用回调和超时处理您自己的示例

3）用Promises代替回调

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

4）使用rxjs Observables（类似于JS Observable）以“角度”方式进行操作

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

PS：更具体地说：

您的代码失败，因为以下行以异步方式执行。因此，代码将调用您的 uploadfile 函数，并立即执行而无需等待。

this.uploadservice.uploadfile(file, k);

一旦您遵循了我上面描述的所有要点，您将可以执行以下操作（使用Promise）：

this.uploadservice.uploadfile(file, k)
  .then( result => {
     console.log('Upload finished');
   })
  .catch(error => {
     console.log('Something went wrong');
  });

aws s3存储桶图像在angular6中上传时返回问题

1 个答案: