我一直在寻找上传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; });
干杯.