반응/Firebase 이미지 업로드 진행률 표시줄

사용 기술: Reactjs, Google Firebase, 의미 ui react

포괄된 주제

- 주
- 비동기식 요청
- 오류 처리
- 파일 업로드 (본 강좌의 이미지)
- 의미 사용자 인터페이스의 사용자 정의 구성 요소로 시간 절약
사용자가 이미지 파일을 Google Firebase에 업로드하고 업로드 진행률을 표시할 수 있도록 코드를 작성하는 것이 목표입니다.
우리는 의미 사용자 인터페이스에서 나온 맞춤형 구성 요소를 사용하여 시간을 절약할 것이다.

1단계 ~ 구성 요소 설정

간단한 클래스 구성 요소부터 시작합니다. 이 구성 요소는 파일 업로드 필드와 제출 단추가 있는 폼을 포함합니다.

import React from "react";
import { 
  Form, 
  Button, 
} from 'semantic-ui-react';

class ExampleForm extends React.Component {
    state = {
      file: null,
      errors: [],
      uploadState: null
    };

    render () {
      return (
        <Form onSubmit={this.handleSubmit}> 
          <Input
              onChange={this.addFile}
              disabled={uploadState === 'uploading'}
              name="file"
              type="file"
           />
         <Button>Post</Button>
        </Form>
      );
    };
}

export default ExampleForm;

상태의 "file"변수를 null로 설정합니다. onChange를 입력할 때,ddFile () 함수를 구축하여 사용자가 선택한 파일을 "file"에 저장합니다.
파일을 업로드할 때 파일 선택을 사용하지 않으려고 합니다. 따라서 uploadState 값을 state에 추가하고 uploadState가 "Upload"와 같을 때 입력한 disabled 속성을true로 설정합니다.
나중에 handleSubmit() 함수도 작성합니다.
상태의 오류 그룹은 오류를 추적할 수 있는 선택적인 방법입니다.다음 uploadFile 함수를 참조하십시오.

2단계 ~ addFile()

addFile 함수 만들기

addFile = event => {
  const file = event.target.files[0];
  if (file) {
    this.setState({ file });
  }
};

이벤트 대상을addFile 함수에 전달함으로써 첨부된 파일 그룹에 접근할 수 있습니다.사용자가 우리의 입력을 눌렀을 때 선택한 이미지는 첫 번째 인덱스에 저장됩니다.이 값을 가져와 "file"값에 저장합니다.

3단계 ~ 파일 유형 확인()

파일을 보내기 전에 이미지 파일을 선택했는지 확인하십시오.
정확한 파일 형식이 있는지 확인하기 위해서, state에 권한이 부여되지 않은 함수를 추가하고, "mime 형식"라이브러리를 가져옵니다.

state = {
  file: null,
  authorizedFileTypes: ['image/jpeg', 'image/png'],
  errors: []
}

import mime from 'mime-types';

isAuthorized = filename => this.state.authorized.includes(mime.lookup(filename))

만약 파일 형식이 우리가 상태에 추가한 authorizedFileTypes 그룹의 문자열과 일치한다면, isAuthorized는true를 되돌려줍니다.

4단계 ~ uploadFile()

일단 우리가 파일이 이미지라는 것을 확인할 수 있다면, 우리는 그것을 우리의 목적지로 전송하는 기능이 필요하다.이 강좌에서 우리의 목적지는 구글 Firebase입니다.[Firebase에 응용 프로그램을 어떻게 연결하는지 확실하지 않으면, 어떻게 연결하는지에 관한 강좌를 썼습니다.
아래에서 유일한 Firebase 프로필을 가져올 것입니다. 여기서 유일한 Firebase 프로필을 가져올 수 있습니다.]
첫 번째 단계는 Firebase를 가져오고 Firestore에 저장된 인용을state에 추가하는 것입니다.업로드를 추적하기 위해 상태에percentUploaded라는 값을 추가하고 0으로 설정합니다.

import firebase from 'path in dir to firebase.js';

// state will now look like this
state ={
  storageRef: firebase.storage().ref(), // ADD THIS LINE
  percentUploaded: 0, // ADD THIS LINE TOO
  uploadTask: null // ADD THIS LINE TOO, SEE BELOW
  file: null,
  uploadState: null,
  authorizedFileTypes: ['image/jpeg', 'image/png'],
  errors: []
}

또 한 가지 상태에 추가해야 할 것은 앞으로 우리의 진도표 작업에 매우 중요하다.작업을 저장하거나 탐지기의 값을 변경하려면 키를 추가해야 합니다.우리는 이를 uploadTask라고 부르고null로 설정합니다.
나는 당신에게 이미 완성된 함수를 보여주고 현재 발생하고 있는 일을 분해할 것입니다.

// uuidv4() generates a unique id
import uuidv4 from 'uuid/v4';

uploadFile = (file) => {
    // location in storage you want to create/send file to
    const filePath = `trades/images/${uuidv4()}.jpg`;

    this.setState({
      uploadTask: this.state.storageRef.child(filePath).put(file)
    },
      () => {
        this.state.uploadTask.on(
          'state_changed', 
          snap => {
            const percentUploaded = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);
            this.setState({ percentUploaded }); 
        },
          err => {
            console.error(err);
            this.setState({
              errors: this.state.errors.concat(err),
              uploadState: 'error',
              uploadTask: null
            });
          },
          () => {
            this.state.uploadTask.snapshot.ref.getDownloadURL().then(downloadUrl => {
              console.log('this is the image url', downloadUrl);
              this.setState({ uploadState: 'done' })
            })
            .catch(err => {
              console.error(err);
              this.setState({
                errors: this.state.errors.concat(err),
                uploadState: 'error',
                uploadTask: null
              })
            })
          }
        )
      }
    )
}

지금 벌어지고 있는 일을 분석해 봅시다.

this.setState({
      uploadTask: this.state.storageRef.child(filePath).put(file)
    },
      () => {
        this.state.uploadTask.on(
          'state_changed', 
          snap => {
            const percentUploaded = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);
            this.setState({ percentUploaded }); 
        }

우선 uploadTask 값을 반환값으로 설정합니다.puts().이 함수는 작업이 끝날 때까지 계속 업데이트되는 작업을 되돌려줍니다.이 임무는 우리의 파일 저장 여행이다.

탐지기 추가를 사용합니다.()에 있습니다.상태상태 변경을 수신하는 uploadTask이 값은 상태에서 끊임없이 변화한다는 것을 기억하십시오.puts()

uploadTask가 바뀔 때마다 uploadTask의 가치 스냅샷에 접근할 수 있습니다.이 스냅샷과 관련된 몇 가지 관건에 접근함으로써 우리는 수학적으로 파일을 얼마나 전송했는지 계산할 수 있다.반올림(snap.ByTestTransferd/snap.totalBytes)*100) 및 이 값을 상태의 업로드 백분율로 설정합니다.

err => {
            console.error(err);
            this.setState({
              errors: this.state.errors.concat(err),
              uploadState: 'error',
              uploadTask: null
            });
          },
          () => {
            this.state.uploadTask.snapshot.ref.getDownloadURL().then(downloadUrl => {
              console.log('this is the image url', downloadUrl);
              this.setState({ uploadState: 'done' })
            })
            .catch(err => {
              console.error(err);
              this.setState({
                errors: this.state.errors.concat(err),
                uploadState: 'error',
                uploadTask: null
              })
            })
          }
        )

다음 줄에서 오류를 검사합니다. 오류가 발견되면 오류 그룹을 채우고 uploadTask/상태를 초기화합니다.그런 다음 업로드된 이미지 다운로드 URL에 액세스할 수 있습니다.업로드State를 done로 설정하고 상태에서 파일을 지울 수 있는 좋은 시기입니다.그리고 우리는 모든 오류를 다시 포착하고 함수를 끝낼 수 있다.
우리는 현재 성공적으로 우리 컴퓨터에서 이미지를 촬영하여 구글 Firestore로 보냈다.근데 진도표는요?

제5단계 진도조

자신의 진도 게이지 구성 요소를 만들고 의미 ui의 진도 게이지를 사용자 정의로 가져옵니다.우리는 첫 번째 구성 요소에서 진도표에 두 개의 값을 전달할 것이다.

import React from 'react';
import { Progress } from 'semantic-ui-react';

const ProgressBar = ({ uploadState, percentUploaded }) => (
  uploadState === "uploading" && (
    <Progress 
      className="progress__bar"
      percent={percentUploaded}
      progress
      indicating
      size="medium"
      inverted
    />
  )
);

export default ProgressBar;

주요 구성 요소에서 이progress Bar를 가져와서 렌더링 함수에 추가합니다.uploadState와 PercentUploadDown을 도구로 전달하는 것을 잊지 마세요.

import ProgressBar from 'dir of progress bar';

<ProgressBar 
  uploadState={uploadState} 
  percentUploaded={percentUploaded}
/>

현재, 우리가 파일을 업로드할 때, 우리는 진도표가 가득 찬 것을 볼 수 있다.남은 유일한 일은 이것을 모두handleSubmit 함수에 연결하고 구성 요소의 상태와 탐지기를 청소하는 것입니다.

6단계 – handleSubmit () 및 componentWillUnmount

handleSubmit = event => {
   uploadFile(this.state.file);
  };

componentWillUnmount() {
    if (this.state.uploadTask !== null) {
      this.state.uploadTask.cancel();
      this.setState({ uploadTask: null });
    }
  }

이미지 업로드와% 업로드 추적기가 있습니다.나는 이것이 Firebase와 합작하는 모든 사람들이 반응하는 데 도움을 줄 수 있기를 바란다.

추가 오류 처리

우리는 두 개의 함수로 발생할 수 있는 모든 오류를 처리합시다.
우선, 파일에 요소의 클래스 이름을 입력하십시오. 이 클래스 이름은 우리가 설정할 Handle InputErrors라는 새로운 함수를 호출하는 것과 같습니다.상태의 오류 그룹과 찾을 키워드를 이 함수에 전달합니다.

<Input
   className={this.handleInputError(errors,'file')}
   onChange={this.addFile}
   disabled={uploadState === 'uploading'}
   fluid
   label="File types: jpg, png"
   name="file"
   type="file"
/>

handleInputError = (errors, inputName) => {
    return errors.some(error => 
      error.message.toLowerCase().includes(inputName)
      )
        ? "error"
        : ""
  }

  displayErrors = errors => errors.map((error, i) => <p key={i}>{error.message}</p>);

첫 번째 함수인handleInputError는 "file"을 처리하는 그룹에 오류가 있는지 검사합니다. 만약 있다면, 우리의 클래스 이름은 "error"가 됩니다.오류 클래스를 빨간색으로 설정할 수 있습니다. 클래스 이름이 오류로 바뀌면 사용자에게 이 상태를 반영합니다.우리의 마지막 함수displayErrors는 오류 그룹에 비추고 모든 오류와 관련된 메시지를 표시합니다.