如何在React中找到上传图片的路径？

Question

我是一名初学程序员，正在与一个小组合作开展项目，我有一些代码可以点击按钮并选择一个文件。但是，在选择文件时，我需要能够获取图像的URL（因此它不会硬编码到项目中）。这样，图像就会显示在网站上。我将从我的计算机上传到本地主机地址。这是反应。以下是项目中的代码。谢谢你的帮助。

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 , played: 0, duration: 0};
    this.state1 = { pictures: [] };
    this.onDrop = this.onDrop.bind(this);
  }

  onDrop(picture) {
      this.setState1({
          pictures: this.state1.pictures.concat(picture),
      });
  }

  onMouseMove(e) {
    this.setState({ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY });
  }

  onPlayed(e) {
    this.setState({played: e.getUTCSeconds})
  }

  onDuration = (duration) => {
    console.log('onDuration', duration)
    this.setState({ duration })
  }

  onProgress = state => {
    console.log('onProgress', state)
    // We only want to update time slider if we are not currently seeking
    if (!this.state.seeking) {
      this.setState(state)
    }
  }

  render () {

    const { x, y, played, duration} = this.state;



    return <div>

    <ImageUploader
        withIcon={true}
        buttonText='Choose images'
        onChange={this.onDrop}
        imgExtension={['.jpg', '.gif', '.png', '.gif']}
        maxFileSize={5242880}
    />

            <h1>Mouse coordinates: { x } { y } {played * duration}</h1>
            <h1> {hotspots} </h1>
            <ReactPlayer  onMouseMove={this.onMouseMove.bind(this)}

              url={'./Intro_Stephen.mp4'} <---this is currently hard coded, I need to have a way to get the image url brought in, so that it can be used here. 

              controls={true}
              onClick={() => addHotspot(this.state.x, this.state.y, this.state.played * this.state.duration)}
              onDuration={this.onDuration}
              onProgress={this.onProgress}
              height={320}
              width={640}
              />
            <button>Save Hotspot</button>
          </div>;
  }
}