Folosind progresul handler, atunci când încărcarea fișierelor la AWS S3 cu Reacționa

Bine, am gasit solutia. Callback pe variabilă de stat funcționează bine și nu face ceea ce ar trebui. Dar configurația Upload obiectul a fost oprit. După săpat în sursă am aflat că ascultător eveniment doar se declanșat dacă încărcare a încărcat mai multe date. Pentru că Uploader bucăți de încărcări aveți două parametri de configurare care vă permite să împărți incarca separat în bucăți. Deci

const upload = new Upload({
  client: s3,
  params: target,
  queueSize: 4,          // 4 is minimum
  partSize: 5*1024*1024  // 5MB is minimum
});

practic are loc de muncă atunci când fișierul ne incarca este mai mare decât 5MB! Numai atunci evenimentul se declanșat din nou și actualizări de variabila de stare.

Deoarece această încărcare se face pentru manipularea mari încărcări de fișiere, în acest sens și am putea pur și simplu a regla queueSize și partSize potrivit fișier vrem să încărcați. Ceva de genul

let queueSize = 10;
const file = event.target.files[0];

let partSize = file.size / (10 * 1024 * 1024);    // 1/10th of the file size in MB

const upload = new Upload({
  client: s3,
  params: target,
  queueSize: partSize > 5 queueSize : undefined,
  partSize: partSize > 5 ? partsize : undefined
});

Evident, acest lucru poate fi făcut mult mai sofisticate, dar nu vreau să-și petreacă prea mult timp pe acest lucru, deoarece nu este parte din întrebarea inițială.

Concluzie

Dacă fișierul este suficient de mare (>5MB), veți vedea progresul actualizare, în funcție de numărul de bucăți (de 5MB sau mai multe) trebuie alese pentru a împărți fișier.

Deoarece aceasta afectează numai handleChange metoda de original exemplu, am posta acest pentru complet

const handleChange = async ( event ) => {
  const file = event.target.files[0]

  const target = {
    Bucket: 'some-S3-bucket',
    Key: `jobs/${file.name}`,
    Body: file,
  };

  const s3 = new S3Client({
    region: 'your-region',
    credentials: fromCognitoIdentityPool({
      client: new CognitoIdentityClient({ region: 'your-region' }),
      identityPoolId: "your-id",
    }),
  });

  // this will default to queueSize=4 and partSize=5MB
  const upload = new Upload({
    client: s3,
    params: target
  });

  upload.on("httpUploadProgress", progress => {
    console.log('Current Progress', progress);
    setProgr(progress);
  });

  await upload.done().then(r => console.log(r));
} 

Poate că acest lucru îi ajută pe cineva care are aceeasi problema.

Am dat peste raspunsul tau dupa ce au exact aceeasi problema (cu Vue) de azi!

Într-adevăr, aveți dreptate: AWS SDK JS v3 eveniment, trage doar pe partea care nu este deloc clară și mi-am irosit timpul de depanare asta. Ca pentru un 4MB fișier, acesta ar fi doar vreodată foc la 100%.

Cum ai spus, puteți experimenta cu dimensiunea parte dar minimul este de 5MB și deci pe o conexiune lentă-am găsit poate apărea ca o încărcare este blocat ca va trebui să așteptați pentru 5MB pentru a obține orice date. Hmm. Deci ce am făcut a fost să se uite la dimensiunea de fișier a fi încărcate. Și dacă acesta este sub un prag (spune 25MB, sau cum este aplicabil), bine este, probabil, sigur să încarce toate într-un du-te ca nu ai nevoie de mai multe încărcarea. Și așa că am , de asemenea, a făcut o presigned URL (https://aws.amazon.com/blogs/developer/generate-presigned-url-modular-aws-sdk-javascript/), care poate fi folosit pentru a PUNE folosind axios (din fetch nu are suport pentru progresul evenimente încă).

Deci, în acest fel puteți utiliza upload pentru fișiere mari (în cazul în care aveți de fapt nevoie de mai multe încărcarea și în cazul în care 5MB ca un procent din dimensiunea fișierului este de mici), și de a folosi un presigned URL-ul pentru fișiere mici și deci se obține mult mai multe actualizări frecvente.

Același progres event handler poate fi utilizat de către ambele.

this.$axios
  .request({
     method: "PUT",
     url: SIGNED-URL-HERE,
     data: file,
     timeout: 3600 * 1000,
     onUploadProgress: this.uploadProgress,
  })
  .then((data) => {
     console.log("Success", data);
  })
  .catch((error) => {
     console.log("Error", error.code, error.message);
  });

Nu este ideal, dar ajută.