का उपयोग कर प्रगति हैंडलर जब फ़ाइलें अपलोड करने के लिए एडब्ल्यूएस S3 के साथ प्रतिक्रिया

Question 1

मैं हाल ही में काम के साथ एडब्ल्यूएस एसडीके और इस प्रकार बहाना कृपया अगर मेरे दृष्टिकोण पूरी तरह बकवास है.

मैं करना चाहते हैं अपलोड करने के लिए एक सरल मीडिया फाइल करने के लिए मेरे S3. मैं के बाद किया गया था इस ट्यूटोरियल और अब तक मैं कर रहा हूँ फ़ाइलें अपलोड करने के लिए एक समस्या के बिना. के लिए userbility एक प्रगति पट्टी के लिए किया जाएगा एक अच्छा अतिरिक्त और इसलिए मैं शोध कर रहा था के लिए कैसे इस लक्ष्य को हासिल । मैं जल्दी से पाया है कि वर्तमान एडब्ल्यूएस एसडीके v3 समर्थन नहीं करता है httpUploadProgress अब लेकिन हम का उपयोग करना चाहिए @aws-sdk/lib-storage के बजाय. इस पुस्तकालय का उपयोग कर, मैं हूँ अभी भी में सक्षम करने के लिए फ़ाइलों को अपलोड करने के लिए S3 लेकिन मैं नहीं मिल सकता है प्रगति पर नजर रखने के लिए काम करते हैं! मुझे लगता है इस के साथ क्या कुछ किया मुझे पूरी तरह से नहीं समझ कैसे से निपटने के लिए async के भीतर एक प्रतिक्रिया के घटक है ।

तो यहाँ है मेरे minified घटक उदाहरण के लिए (मैं का उपयोग कर रहा हूँ चक्र यूआई यहाँ)

const TestAWS: React.FC = () => {
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [progr, setProgr] = useState<number>();

  const region = "eu-west-1";
  const bucketname = "upload-test";

  const handleClick = async () => {
    inputRef.current?.click();
  };

  const handleChange = (e: any) => {

    console.log('Start file upload');

    const file = e.target.files[0];
    const target = {
      Bucket: bucketname,
      Key: `jobs/${file.name}`,
      Body: file,
    };

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

    const upload = new Upload({
      client: s3,
      params: target,
    });

    const t = upload.on("httpUploadProgress", progress => {
      console.log("Progress", progress);

      if (progress.loaded && progress.total) {
        console.log("loaded/total", progress.loaded, progress.total);
        setProgr(Math.round((progress.loaded / progress.total) * 100)); // I was expecting this line to be sufficient for updating my component
      }
    });
    await upload.done().then(r => console.log(r));
  };

console.log('Progress', progr);

return (
    <InputGroup onClick={handleClick}>
      <input ref={inputRef} type={"file"} multiple={false} hidden accept='video/*' onChange={e => handleChange(e)} />
      <Flex layerStyle='uploadField'>
        <Center w='100%'>
          <VStack>
            <PlusIcon />
            <Text>Choose Video File</Text>
          </VStack>
        </Center>
      </Flex>
      {progr && <Progress value={progr} />}
    </InputGroup>
  );
};

export default TestAWS;

तो मूल रूप से मैं देख रहा हूँ घटना निकाल दिया हो रही (start फ़ाइल अपलोड करें). तो यह एक समय लेता है और मैं वादा परिणाम और Progress, 100 मेरी सांत्वना है । इसका मतलब यह है कि मुझे राज्य चर अद्यतन किया जाता है (कम से कम एक बार), लेकिन घटक नहीं करता है फिर से प्रस्तुत करना?

क्या है यह मैं क्या कर रहा हूँ गलत? यहाँ किसी भी मदद की सराहना!!!

Question 2

ठीक है, मैं ने पाया है एक समाधान है. कॉलबैक पर राज्य चर ठीक से काम करता है और क्या करता है यह होना चाहिए. लेकिन विन्यास के Upload उद्देश्य था । बाद में खुदाई के स्रोत मुझे पता चला है कि घटना श्रोता ही शुरू हो जाता है, तो अपलोडर अपलोड किया गया है, और अधिक डेटा. क्योंकि अपलोडर मात्रा को अपलोड आप दो अलग-अलग विन्यास पैरामीटर की अनुमति है, जो आप को विभाजित करने के लिए अपने अपलोड में अलग-अलग मात्रा. तो

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

मूल रूप से काम करता है जब हम फ़ाइल अपलोड की है की तुलना में बड़ा 5MB! उसके बाद ही घटना शुरू हो जाता है फिर से और अद्यतन के राज्य चर.

इस के बाद से अपलोड किया जाता है से निपटने के लिए बड़ी फाइल अपलोड, यह पूरी तरह से समझ में आता है और हम आसानी से समायोजित करें queueSize और partSize के अनुसार हम फ़ाइल अपलोड करना चाहते हैं. की तरह कुछ

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

जाहिर है, यह किया जा सकता है और अधिक परिष्कृत, लेकिन मैं नहीं था करने के लिए चाहते हैं पर बहुत अधिक समय खर्च इस के बाद से यह हिस्सा नहीं है के मूल सवाल है.

निष्कर्ष

यदि आपकी फ़ाइल काफी बड़ी है (>5MB), आप देखेंगे प्रगति अद्यतन पर निर्भर करता है, की संख्या मात्रा (के 5MB या अधिक) आप चुना है विभाजित करने के लिए अपनी फ़ाइल.

के बाद से यह केवल प्रभावित करता है handleChange विधि मूल रूप से उदाहरण के लिए, मैं इस पोस्ट के लिए पूर्णता

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

हो सकता है इस में मदद करता है, जो किसी को एक ही समस्या है ।

Question 3

मैं भर में आया अपने जवाब होने के बाद वास्तव में एक ही समस्या के साथ (Vue) आज!

वास्तव में आप सही कर रहे हैं: एडब्ल्यूएस एसडीके जे एस v3 घटना केवल आग के प्रति हिस्सा नहीं है, जो सब पर स्पष्ट है और मैं व्यर्थ समय डिबगिंग है । की तरह के लिए एक 4MB फ़ाइल, यह केवल कभी आग पर 100%.

के रूप में आप कहते हैं, आप कर सकते हैं के साथ प्रयोग के भाग के आकार , लेकिन कम से कम 5MB और इतने पर एक धीमी गति से कनेक्शन मैंने पाया यह प्रकट कर सकते हैं कि एक अपलोड अटक गया है के रूप में आप के लिए प्रतीक्षा करने के लिए 5MB प्राप्त करने के लिए किसी भी डेटा. हम्म । तो क्या मैंने किया था, आकार में देखने के लिए फाइल को अपलोड किया जा रहा. और अगर यह है के तहत एक सीमा (कहते हैं 25MB, या जो भी लागू होता है), अच्छी तरह से यह शायद सुरक्षित अपलोड करने के लिए है कि एक ही बार में सभी के रूप में आप वास्तव में जरूरत नहीं बहुखण्डीय अपलोड. और इसलिए मैं भी एक presigned यूआरएल (https://aws.amazon.com/blogs/developer/generate-presigned-url-modular-aws-sdk-javascript/), जो इस्तेमाल किया जा सकता है डाल करने के लिए का उपयोग कर axios (के बाद से fetch का समर्थन नहीं करता है प्रगति घटनाओं अभी तक).

तो तरीका है कि आप का उपयोग कर सकते हैं upload बड़ी फ़ाइलों के लिए (जहां आप वास्तव में जरूरत है बहुखण्डीय अपलोड करने और जहां 5MB के प्रतिशत के रूप में फ़ाइल का आकार छोटा है), और उपयोग एक presigned यूआरएल के लिए छोटे फ़ाइलों और तो और अधिक लगातार अद्यतन.

एक ही प्रगति ईवेंट हैंडलर द्वारा इस्तेमाल किया जा सकता है दोनों.

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

नहीं आदर्श है, लेकिन यह मदद करता है ।

Flo Ragossnig · Answer 1 · 2021-11-22T18:06:15

ठीक है, मैं ने पाया है एक समाधान है. कॉलबैक पर राज्य चर ठीक से काम करता है और क्या करता है यह होना चाहिए. लेकिन विन्यास के Upload उद्देश्य था । बाद में खुदाई के स्रोत मुझे पता चला है कि घटना श्रोता ही शुरू हो जाता है, तो अपलोडर अपलोड किया गया है, और अधिक डेटा. क्योंकि अपलोडर मात्रा को अपलोड आप दो अलग-अलग विन्यास पैरामीटर की अनुमति है, जो आप को विभाजित करने के लिए अपने अपलोड में अलग-अलग मात्रा. तो

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

मूल रूप से काम करता है जब हम फ़ाइल अपलोड की है की तुलना में बड़ा 5MB! उसके बाद ही घटना शुरू हो जाता है फिर से और अद्यतन के राज्य चर.

इस के बाद से अपलोड किया जाता है से निपटने के लिए बड़ी फाइल अपलोड, यह पूरी तरह से समझ में आता है और हम आसानी से समायोजित करें queueSize और partSize के अनुसार हम फ़ाइल अपलोड करना चाहते हैं. की तरह कुछ

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

जाहिर है, यह किया जा सकता है और अधिक परिष्कृत, लेकिन मैं नहीं था करने के लिए चाहते हैं पर बहुत अधिक समय खर्च इस के बाद से यह हिस्सा नहीं है के मूल सवाल है.

निष्कर्ष

यदि आपकी फ़ाइल काफी बड़ी है (>5MB), आप देखेंगे प्रगति अद्यतन पर निर्भर करता है, की संख्या मात्रा (के 5MB या अधिक) आप चुना है विभाजित करने के लिए अपनी फ़ाइल.

के बाद से यह केवल प्रभावित करता है handleChange विधि मूल रूप से उदाहरण के लिए, मैं इस पोस्ट के लिए पूर्णता

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

हो सकता है इस में मदद करता है, जो किसी को एक ही समस्या है ।

coder_uk · Answer 2 · 2021-11-24T00:54:55

मैं भर में आया अपने जवाब होने के बाद वास्तव में एक ही समस्या के साथ (Vue) आज!

वास्तव में आप सही कर रहे हैं: एडब्ल्यूएस एसडीके जे एस v3 घटना केवल आग के प्रति हिस्सा नहीं है, जो सब पर स्पष्ट है और मैं व्यर्थ समय डिबगिंग है । की तरह के लिए एक 4MB फ़ाइल, यह केवल कभी आग पर 100%.

के रूप में आप कहते हैं, आप कर सकते हैं के साथ प्रयोग के भाग के आकार , लेकिन कम से कम 5MB और इतने पर एक धीमी गति से कनेक्शन मैंने पाया यह प्रकट कर सकते हैं कि एक अपलोड अटक गया है के रूप में आप के लिए प्रतीक्षा करने के लिए 5MB प्राप्त करने के लिए किसी भी डेटा. हम्म । तो क्या मैंने किया था, आकार में देखने के लिए फाइल को अपलोड किया जा रहा. और अगर यह है के तहत एक सीमा (कहते हैं 25MB, या जो भी लागू होता है), अच्छी तरह से यह शायद सुरक्षित अपलोड करने के लिए है कि एक ही बार में सभी के रूप में आप वास्तव में जरूरत नहीं बहुखण्डीय अपलोड. और इसलिए मैं भी एक presigned यूआरएल (https://aws.amazon.com/blogs/developer/generate-presigned-url-modular-aws-sdk-javascript/), जो इस्तेमाल किया जा सकता है डाल करने के लिए का उपयोग कर axios (के बाद से fetch का समर्थन नहीं करता है प्रगति घटनाओं अभी तक).

तो तरीका है कि आप का उपयोग कर सकते हैं upload बड़ी फ़ाइलों के लिए (जहां आप वास्तव में जरूरत है बहुखण्डीय अपलोड करने और जहां 5MB के प्रतिशत के रूप में फ़ाइल का आकार छोटा है), और उपयोग एक presigned यूआरएल के लिए छोटे फ़ाइलों और तो और अधिक लगातार अद्यतन.

एक ही प्रगति ईवेंट हैंडलर द्वारा इस्तेमाल किया जा सकता है दोनों.

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

नहीं आदर्श है, लेकिन यह मदद करता है ।

मैं एक ही विचार था, लेकिन निष्पक्ष होना करने के लिए, मुझे लगता है कि lib-storage कभी नहीं था करने के लिए इस्तेमाल किया जा सकता के लिए फाइल अपलोड. दुर्भाग्य से, यह लगता है कि वहाँ वर्तमान में कोई संतोषजनक समाधान का उपयोग करते समय v3 (के बाद से यह उपयोग में लाने एपीआई हुड के तहत) और अपलोड छोटे फ़ाइलें । तो अपने दृष्टिकोण निश्चित रूप से एक अच्छा समाधान, लेकिन उम्मीद है कि वे कुछ को लागू एसडीके में बहुत जल्द ही.
मैं सहमत हूँ. यह कष्टप्रद होने का उपयोग करने के लिए एक हस्ताक्षर किए गए URL के रूप में एक वैकल्पिक हल लेकिन जब तक/जब तक एसडीके परिवर्तन (शायद जब लाने एपीआई कहते हैं, प्रगति अपलोड) के लिए अब यह लगता है कि आप लेने के लिए है पर निर्भर करता है कि क्या बहुखण्डीय या नियमित रूप से अद्यतन प्रगति के लिए सबसे महत्वपूर्ण है अपने उपयोग

का उपयोग कर प्रगति हैंडलर जब फ़ाइलें अपलोड करने के लिए एडब्ल्यूएस S3 के साथ प्रतिक्रिया

सवाल

सबसे अच्छा जवाब

निष्कर्ष

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में