Pomocí pokrok psovoda při nahrávání souborů do AWS S3 s Reagovat

V pořádku, našel jsem řešení. Zpětné volání na stavu proměnné funguje a dělá to, co je třeba. Ale konfigurace Upload objekt byl pryč. Po kopání do zdroje jsem zjistil, že posluchače událostí, pouze se spustí, pokud uploader nahrál více údajů. Protože Umístil kousky, obrázky máte dva samostatné konfigurační parametry, které vám umožní rozdělit váš nahrát do samostatné kusy. Tak

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

v podstatě dělá práci, když soubor jsme nahrát je větší než 5MB! Teprve pak událost se spustí znovu a aktualizace stavu proměnné.

Protože tento uploader je určen pro zpracování velkých souborů na server, to úplně dává smysl, a můžeme jednoduše upravit queueSize a partSize podle k souboru, který chceme nahrát. Něco jako

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
});

Samozřejmě, to může být provedeno mnohem více sofistikované, ale nechtěl jsem trávit příliš mnoho času na to, protože to není součástí původní otázku.

Závěr

Pokud váš soubor je dostatečně velký (>5 MB), budete vidět pokrok aktualizovat, v závislosti na počtu bloků (5 MB nebo více) jste se rozhodli rozdělit váš soubor.

Protože to má vliv pouze na handleChange metoda z původního příkladu, jsem tento post pro úplnost

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));
} 

Možná to někomu pomůže, kdo má stejný problém.

Narazil jsem na vaši odpověď, poté, co přesně stejný problém (s Vue) dnes!

Skutečně máte pravdu: AWS SDK JS v3 případě pouze požáry za část , která není vůbec jasné, a jsem ztracený čas ladění, že příliš. Pro 4MB souboru, bylo by to jen někdy střílet na 100%.

Jak říkáte, můžete experimentovat s velikost dílu , ale minimum je 5 MB a tak na pomalé připojení jsem zjistil, to se může zdát, že upload je přilepená, jak budete muset čekat na 5MB získat žádné údaje. Hmm. Takže to, co jsem udělal, bylo se podívat na velikost souboru, který je nahrán. A pokud je pod prahovou hodnotou (řekněme 25MB, nebo cokoliv, co je relevantní), tak je to pravděpodobně bezpečné nahrát to vše v jednom jít, protože nemáte opravdu potřebují multipart upload. A tak jsem také udělal presigned URL (https://aws.amazon.com/blogs/developer/generate-presigned-url-modular-aws-sdk-javascript/), které mohou být použity k DÁT pomocí axios (od fetch nepodporuje průběh události zatím).

Tak, že způsob, jak můžete použít upload pro velké soubory (kde skutečně potřebujete multipart upload a kde 5MB jako procento z velikosti souboru je malý), a použít presigned URL pro malé soubory, a tak získat mnohem více časté aktualizace.

Stejný pokrok obslužné rutiny události mohou být použity jak.

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);
  });

Není ideální, ale pomáhá.