개시하다

SNS에서 흔히 볼 수 있는.
소개 이미지 선택
- 이미지 미리보기 보기
→"외부 스토리지 디바이스에 저장"
이는 React+Firestore(DB)+Firebasestore(Storage)로 진행하는 방법이다.
또 다른 좋은 방법이 있다면 교수님께 감사드립니다!
참고로 이번에는 원래대로 그림을 보냈습니다.
react-image-crop 이 라이브러리를 사용하는 경우
간단한 이미지 크기 조정

뭘 해야 할지 대충 설명해 주세요.

이번 주제는 "프로필 이미지 바꾸기"입니다.
프로필
소개 이미지
이름
라는 두 필드가 있습니다.
미리 정리해서 처리하면...

componentDidMount로 현재 간단한 그림 가져오기

input[type ='file'에서 이미지 파일 수신

받은 파일을 참조할 수 있는 임시 URL을 만들고render의 포토 URL을 저쪽으로 변경한다.
stoage에 보내는 파일을 저장합니다.

"저장 버튼"을 누르면 유지된 파일을FirebaseStorage에 전송하여 참조할 수 있는 URL

만들기

Firestore 업데이트

해보자.

componentDidMount까지

ProfileSetting.jsx

export default class ProfileSetting extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      photoURL: 'https://{イメージがない時に表示する画像パス}',
      blob: {},
      imgChanged: false,
      saving: false
    }
  }
  handleChangeFile(e) {
    // ファイルが上がった時の処理
  }
　　　submit = async () => {
    // 保存する
  }

  componentDidMount　= async () => {
    // ユーザを取ってくる処理
    const user = Backend.getUser()
    this.setState({ ...user.data() })
  }
  render() {
    const { photoURL, blob, saving } = this.state
    return (
      <div style={styles.wrapper}>
        <h1  style={styles.heading}>プロフィール画像を設定する記事を書く</TitleText>
        <img style={styles.profileImg} src={photoURL} />
        <input type="file" disabled={saving} onChange={(e) => this.handleChangeFile(e)} />
      </Wrapper>
    )
  }
}

Backend.js

getUser = _ => {
  // this.uid は、プロフィール編集者のuidとします
  return firestore.collection("users").doc(this.uid).get()
}

여기까지, 아래쪽의 느낌을 준다(디자인은 여기에 적당하다)
이미지를 처리할 때(saving = Time)
인풋 누르지 마.

파일 업로드 처리

ProfileSetting.js

...
const createObjectURL = (window.URL || window.webkitURL).createObjectURL || window.createObjectURL;

handleChangeFile(e){
  const file = e.target.files[0];
  const image_url = createObjectURL(file);
  this.setState({
    photoURL: image_url,
    file: file
  })
}

...

input을 원할 때 파일은 e.target입니다.파일로 배열되어 있습니다.
멀티플 속성이 있으면 여러 멤버가 가입하지만 이번에는 한 파일만 처리합니다
e.target.files[0]만 있으면 됩니다.
그런 다음 createObjectURL을 통해 파일 내용을 참조할 수 있는 임시 URL을 만듭니다.
그때 그림이 이거였어요.

프로필 이미지는 방금 캡처한 것입니다.
이렇게 되면 미리보기가 완성된다.

input에서 Firebase로 보내는 처리 (submit)

ProfileSetting.js

...

submit = async() => {
  this.setState({ saving: true })
  const { changedImg, file, displayName } = this.state
  const photoURL = await Backend.uploadImage({type: 'image', file: file})
　　　　await Backend.updatePhotoURL({
    displayName: displayName, 
    photoURL: photoURL
  })
  this.setState({ saving: false })
  alert("保存しました！")
}

Firestore 및 Firestore 를 사용하여 스토리지 및 DB 업데이트 처리

Backend.js

// ストレージにイメージをアップロードして、それを参照可能なURLをreturnする！
uploadImage = async ({type, file}) => {
  const storageRef = firebase.app().storage().ref(`${type}/${this.user.uid}`)
  await storageRef.put(file)
  return storageRef.getDownloadURL()
}

// ユーザのデータを更新する
updatePhotoURL = ({displayName, photoURL}) => {
  return usersRef.doc(this.uid).update({
    displayName: displayName,
    photoURL: photoURL
    updatedAt: firebase.firestore.FieldValue.serverTimestamp()
  })
}

이렇게 하면 업데이트가 가능합니다!