Question

在将映像成功存储到Firebase后，我正在尝试存储从firebase返回的this.state.url。现在，我在控制台上记录响应，并能够将响应URL呈现为页面上的图像。我希望能够以某种方式将URL作为字符串存储，以便将其发送到已设置的单独的SQL数据库中。谢谢你的帮助！：）

我不能理解道具的工作方式，因为我创建了另一个道具，但必须将它们链接失败。我真的只需要通过axios将字符串发送到SQL数据库，因此，如果在此组件中有某种方法可以做到这一点很棒-或如果唯一的方法是通过另一个组件进行操作，那也可以。现在，我正在尝试将this.state.url设置为const，以便我可以在另一个组件中引用它，但它似乎不起作用。

import {storage} from '../firebase';


class ImageUpload extends Component {
  constructor(props) {
    super(props);
    this.state = {
      image: null,
      url: '',
      progress: 0
    }
    this.handleChange = this
      .handleChange
      .bind(this);
      this.handleUpload = this.handleUpload.bind(this);
  }
  handleChange = e => {
    if (e.target.files[0]) {
      const image = e.target.files[0];
      this.setState(() => ({image}));
    }
  }
  handleUpload = () => {
      const {image} = this.state;
      const uploadTask = storage.ref(`images/${image.name}`).put(image);
      uploadTask.on('state_changed', 
      (snapshot) => {
        // progrss function ....
        const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
        this.setState({progress});
      }, 
      (error) => {
           // error function ....
        console.log(error);
      }, 
    () => {
        // complete function ....
        storage.ref('images').child(image.name).getDownloadURL().then(url => {
            console.log(url);
            this.setState({url});
        })
    });
  }


  render() {
    const style = {
      height: '100vh',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center'
    };
    return (
      <div style={style}>
      <progress value={this.state.progress} max="100"/>
      <br/>
        <input type="file" onChange={this.handleChange}/>
        <button onClick={this.handleUpload}>Upload</button>
        <br/>
        <img UserUpload={this.state.url || 'http://via.placeholder.com/300x300'} alt="Uploaded images" height="300" width="300"/>
      </div>
      // const UserUpload = this.state.url
    )
  }
}

export default ImageUpload;```


Right now I'm just rendering the url via an img src to the page and console.log'ing the url response i get from firebase.

I am super thankful for any help you all give - I'm extremely new to coding and appreciate any help I can get!

如何存储已设置为在其他组件中使用的状态（以便随后可以将该组件的值发送到数据库）

0 个答案: