javascript - 如何在reactjs中获取上传文件的路径

Question

如何在reactjs中获取上传文件的路径。 我使用文件上传来上传文件

render() {
  return (
    <div>
      <input type="file" onChange={this.fileChangedHandler} />
      <button onClick={this.uploadHandler}>Upload!</button>
    </div>
  )
}

然后绑定(bind)uploadHandler

this.uploadHandler = this.uploadHandler.bind(this)

和

uploadHandler = () => { 
  console.log("the selected file is : "+this.state.selectedFile.name)
}

在这里我得到了它的名字。我想获取文件路径。

Answer 1

如果您想上传图像而不发布到服务器，可以使用 base64。

react js:

   this.state = {
     imgUpload: '',
   }

...

  this.getBase64 = this.getBase64.bind(this)

...

  getBase64(e) {
    var file = e.target.files[0]
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      this.setState({
        imgUpload: reader.result
      })
    };
    reader.onerror = function (error) {
      console.log('Error: ', error);
    }
  }

...

  <div>
    <input type="file" className="input-file" name="imgUpload" accept='.png' onChange={this.getBase64} />
  </div>

然后您可以使用{this.state.imgUpload}访问base64字符串并可以操作图像。