reactjs – React Firebase存储文件上传和进度显示

发布时间：2020-12-15 20:41:01 所属栏目：百科来源：网络整理

导读：我一直在寻找上传shenanigan的firebase存储图片.我被卡住了.我该如何展示上传进度？我刚刚意识到使用状态可能不是要走的路,因为我会一遍又一遍地调用setState.想法你好吗？我想我需要某种递归函数,但我在哪里调用呢？我不能称之为我的承诺吗？ // You'll ne

我一直在寻找上传shenanigan的firebase存储图片.我被卡住了.我该如何展示上传进度？我刚刚意识到使用状态可能不是要走的路,因为我会一遍又一遍地调用setState.想法你好吗？

我想我需要某种递归函数,但我在哪里调用呢？我不能称之为我的承诺吗？

// You'll need to set the rules to allow un-authed uploading however.
// Here's how to allow public: goto your firebase console and select the storage tab then the rules tab and change to:
//
// service firebase.storage {
//  match /b/{bucket}/o {
//    match /{allPaths=**} {
//      allow read,write;
//    }
//  }
// }
//
//
// I just threw together an infinite grow animation here for shits,however,I use styled components in my own app so I will access the this.state.percent value in the "actual" animation.

const config = {
    apiKey: "KEY",authDomain: "DOMAIN",databaseURL: "DB_URL",projectId: "ID",storageBucket: "BUCKET",messagingSenderId: "MSG_ID"
};

firebase.initializeApp(config);
const storageRef = firebase.storage().ref()

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      uploading: false,percent: 0,file: '',error: ''
    }
    this.handleFileSelect = this.handleFileSelect.bind(this)
    this.handleFileUpload = this.handleFileUpload.bind(this)
  }
  handleFileSelect(e) {
    this.setState({file: e.target.files[0]})
  }
  handleFileUpload() {
    this.setState({uploading: true})
    storageRef.child('images')
      .put(this.state.file)
      .then(snap => {
        this.setState({uploading: false})
        // the loading percent logic here?
        // how do i keep tabs on the percent?
      })
      .catch(err => this.setState({error: err.message}))
  }
  render() {
    return (
      <div className='container'>
        <div className='form'>
          <input type='file' onChange={this.handleFileSelect}/>
          <button onClick={this.handleFileUpload}>Upload</button>
        </div>
        {this.state.uploading 
          ? <div>
              <div className='load-bar'/>
              <span>Uploading: {this.state.percent}%</span>
            </div>
          : ''
        }
        <pre>
          <code>
            {this.state.error ? <span className='error'>{this.state.error}</span> : ''}
            {JSON.stringify(this.state.file,null,2)}
          </code>
        </pre>
      </div>
    )
  }
}

ReactDOM.render(<App/>,document.getElementById('root'))

body {
  background: #212121;
  color: #dbdbdb;
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1rem;
  margin: 1rem;
  background: rgba(0,0.4);
}

.error {
  font-size: 14px;
  text-align: center;
  color: red;
}

.load-bar {
  height: 20px;
  width: 0px;
  background: lime;
  animation: grow 5s linear forwards;
}

@keyframes grow {
  from {
    width: 0px;
  }
  to {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>

<div id='root'></div>

终于在firebase文档中找到了答案(所有地方).去搞清楚.

这是瘦小的米妮：

var uploadTask = storageRef.child('images/rivers.jpg').put(file);

// Register three observers:
// 1. 'state_changed' observer,called any time the state changes
// 2. Error observer,called on failure
// 3. Completion observer,called on successful completion
uploadTask.on('state_changed',function(snapshot){
  // Observe state change events such as progress,pause,and resume
  // Get task progress,including the number of bytes uploaded and the total number of bytes to be uploaded
  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('Upload is ' + progress + '% done');
  switch (snapshot.state) {
    case firebase.storage.TaskState.PAUSED: // or 'paused'
      console.log('Upload is paused');
      break;
    case firebase.storage.TaskState.RUNNING: // or 'running'
      console.log('Upload is running');
      break;
  }
},function(error) {
  // Handle unsuccessful uploads
},function() {
  // Handle successful uploads on complete
  // For instance,get the download URL: https://firebasestorage.googleapis.com/...
  var downloadURL = uploadTask.snapshot.downloadURL;
});

干杯.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!