どのように反応でFireBaseストレージで画像をアップロードする.js

こんにちは皆さん、私はあなた全員が無事で、元気であることを望みます!
ここでは、FireBaseストレージでイメージをアップロードします.
あなたが既にJavaScript、反応とFireBaseに慣れているならば、あなたは速くこれで動くことができるでしょう!

解説

コマンドを使用してプロジェクトを作成するnpx create-react-app firebase-tutorial次に、ナビゲーションに必要なパッケージをインストールしますyarn add firebaseインストール後、FireBaseという名前の新しいフォルダーを追加し、フォルダに新しいファイルを作成します.ファイル構造は以下のようにすべきである

今すぐfirebase上の新しいプロジェクトを作成する.
Click here .

プロジェクトを追加

プロジェクト名を入力します.

「プロジェクトを作成」をクリックします.

これをクリックしてWebアプリを追加します.

あなたのアプリケーション名を登録します.Firebaseイメージ.登録アプリケーションをクリックします.

このスニペットをコピーし、このスニペットをfirebaseにペーストします.jsファイル.
ファイアベース.JSはこのように見えます.

import firebase from 'firebase'

var firebaseConfig = {
  apiKey: "******rBJcUIyThYVrIqg",
  authDomain: "********.firebaseapp.com",
  projectId: "************",
  storageBucket: "**********.appspot.com",
  messagingSenderId: "***************",
  appId: "*****************df5dfbbee0"
};
  firebase.initializeApp(firebaseConfig);
  export default firebase;

左側サイドバーのストレージアイコンをクリックします.ルールをクリックします.ルールはこのようになります.

コードを変更して発行します.今すぐあなたのルールが変更され、このように見えるはずです.

今すぐコードをする時間.オープンアプリ.以下のコードに従ってください.

import React, { Component } from 'react'
import './App.css';
import firebase from "./firebase/firebase"

export default class App extends Component {
  constructor(){
    super();
    this.state = {
      image: null,
      progress:0,
      downloadURL: null
    }
  }


  handleChange = (e) =>{
    if(e.target.files[0]){
      this.setState({
      image: e.target.files[0]
    })
  }
    // console.log(e.target.files[0])
}

handleUpload = () =>{
  // console.log(this.state.image);
  let file = this.state.image;
  var storage = firebase.storage();
  var storageRef = storage.ref();
  var uploadTask = storageRef.child('folder/' + file.name).put(file);

  uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
    (snapshot) =>{
      var progress = Math.round((snapshot.bytesTransferred/snapshot.totalBytes))*100
      this.setState({progress})
    },(error) =>{
      throw error
    },() =>{
      // uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) =>{

      uploadTask.snapshot.ref.getDownloadURL().then((url) =>{
        this.setState({
          downloadURL: url
        })
      })
    document.getElementById("file").value = null

   }
 ) 
}


  render() {
    return (
      <div className="App">
        <h4>upload image</h4>
        <label>
          Choose file
        <input type="file" id="file" onChange={this.handleChange} />        
        </label>

        {this.state.progress}
        <button className="button" onClick={this.handleUpload}>Upload</button>
        <img
          className="ref"
          src={this.state.downloadURL || "https://via.placeholder.com/400x300"}
          alt="Uploaded Images"
          height="300"
          width="400"
        />
      </div>
    )
  }
}

CSS

.App {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}



label{
  align-items: center;
  padding: 12px;
  background: red;
  display: table;
  color: #fff;
  /* margin-left: 700px; */
  /* padding-inline: 40px; */
   }

   .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
  }
.ref{
  margin-top: auto;
}

input[type="file"] {
  display: none;
}

コマンドを使ってファイルを実行するnpm start
そして
閉じるこの動画はお気に入りから削除されています.
ありがとう!