를 사용하여 진행 핸들러 파일을 업로드할 때 AWS S3React

Question 1

나는 최근을 다루는 AWS SDK 고,따라서 바이러면 방법이 있다.

고 싶은 업로드 간단한 미디어 파일을 내 S3. 나는 다음과 같은 이 튜토리얼 그리고 지금까지 나는 파일을 업로드하지 않고 문제입니다. 에 대한 userbility 진행 표시줄 것이 좋은 추가하고 따라서 연구를 달성하는 방법이다. 나는 빠르게 발견되는 현재의 AWS SDK v3 지원하지 않는 httpUploadProgress 더 이상 하지만 우리가 사용해야 한다 @aws-sdk/lib-storage 대신 합니다. 이 라이브러리를 사용하여,내가 여전히 파일을 업로드할 수 있 S3 얻을 수있는 가장 쉬운 방법을 진행을 추적하는 작업! 나는 가정이 할 수있는 뭔가가 나와 함께 완전히 이해 처리하는 방법 async 에 반응하는 구성 요소입니다.

그래서 여기에 내가 최소화되는 구성 요소 예에서(내가 사용하고 차크라 UI 여기)

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;

그래서 기본적으로 내 이벤트지 (시작하는 파일 업로드). 그 동안 나는 약속 결과 Progress, 100 내 console. 이 의미는 상태변수 업데이트되면(예)그러나 구성 요소지 않을 렌더링합니까?

그것은 무엇을 내가 뭘 잘못된까요? 어떤 도움에 감사드립니다!

Question 2

좋아,내가 찾은 솔루션입니다. 콜백 상태에 변수로 작동하고 무엇을 해야 합니다. 그러나의 구성 Upload 체되었다. 굴착 후원으로 내가 찾는 이벤트를 수신기에만 가 트리거되는 경우 더를 업로드한 더 많은 데이터. 기 때문에 업로더 덩어리를 업로드 당신은 두 가지 별도의 구성 매개변수할 수 있도록을 업로드할 수 있는 별도의 덩어리. 그래서

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

기본적으로 일을 할 때 우리는 파일 업로드가 보다 큰 5 메가바이트! 그런 다음 이벤트가 트리거되는 다시 업데이트 상태 변수입니다.

이 로더는 처리를 위해 대용량 파일 업로드 이미 우리는 단순히 조정 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
});

분명히,이 작업을 수행 할 수 있습니다 훨씬 더 정교한 그러나지 않았을 보내고 싶은 너무 많은 시간이 없기 때문에 일부의 원래 질문입니다.

결론

는 경우에 당신의 파일에 충분히 큰 (>5 메가바이트),당신은 진행 상황 업데이트,수에 따라 덩어리(의 5 메가바이트 이상)당신이 선택한 분할 파일입니다.

이 때문에만 영향을 미치는 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)오늘날!

실로 당신은 오른쪽:AWS SDK JS v3 이벤트만 불당 부분 하지 않는 모든 명확하고 내가 시간을 낭비하는 디버깅는 전세계적인 네트워크입니다. 다음과 같한 4MB 파일 뿐만 아니라 이제까지 불 100%.

당신이 말하는 것처럼,당신은 실험할 수 있는 부분은 크기는 하지만 최저가 5 메가바이트에 연결 속도가 느린 나는 그것이 나타날 수 있는 업로드가 붙어있으로 당신을 기다려야에 대한 5 메가바이트를 얻는 모든 데이터입니다. Hmm. 그래서 무엇을 했는지를 살펴보는 것이었죠 파일의 크기는 업로드됩니다. 면 그것은 임계값(말 25MB,또는 어떤 것이 해당되는 경우),만 그것은 아마 안전을 업로드하는 모든 중 하나에 이동 당신이 정말로 필요하지 않 멀티 업로드에 있습니다. 그래서 저 도 만들어 presigned URL(https://aws.amazon.com/blogs/developer/generate-presigned-url-modular-aws-sdk-javascript/)사용할 수 있는 넣어를 사용하여 날개로 연기 드리프트 같이하지만(이후 fetch 지원하지 않는 진행 이벤트).

그래서 그 방법을 사용할 수 있는 upload 대용량 파일을(당신이 실제로 필요한 여러 부분을 업로드 및가 5 메가바이트의 백분율로 파일 크기가 작고),그리고 사용하 presigned URL 을 위한 작은 파일과 그래서 더 많은 자주 업데이트됩니다.

동일한 진행 이벤트 처리기에 의해 사용될 수 있습니다.

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