我如何在AWS-amplify(React Antial)中发送S3上传的进度

Question

我能够将图像上传到S3并将其发送到控制台，但无法设置组件的状态。似乎进度无法发送到外部功能。即使我具有将其记录到控制台的函数，该函数也不会被调用。

Storage.put(text, Buffer.from(photo.base64, "base64"), {
  progressCallback(progress) {
    prog = parseInt(progress.loaded/progress.total*100)
    console.log(prog+"%");
    this.setState({uploadProgress: prog+"%"})
  },
  contentType: "image/jpeg"
})

Answer 1

这是因为您在storage.put方法的回调中调用this。您可以缓存对存储外this的引用。put方法，例如（由于缺少更好的术语）：

：

const foo = this;
Storage.put(text, Buffer.from(photo.base64, "base64"), {
  progressCallback(progress) {
    prog = parseInt(progress.loaded/progress.total*100)
    console.log(prog+"%");
    foo.setState({uploadProgress: prog+"%"})
  },
  contentType: "image/jpeg"
})