Question

我希望用户能够浏览他们的本地文件，选择一个json文件并上传它。我不想直接导入它。之后我会将它发送到某个服务器api，并将数据从json文件保存到数据库。问题是如何上传json文件以及如何将数据从它发送到服务器端api？

JSON文件看起来像这样{“people”：[{“name”：“Jon”，年龄：23}，{“name”：“Jane”，年龄：25}]}

我有像这样的反应组件

   ...
   handleSubmit (e) {
     e.preventDefault()
     const fileUpload = this.refs.file.value;
   }

   render (): React.Element<any> {
      return (
        ...
        <form onSubmit={this.handleSubmit} encType="multipart/form-data">
          <input type="file" ref="file" accept=".json" id="fileInput" aria-describedby="fileHelp" />

        <button type="submit">Submit</button>
        </form>
    )

修改使用下面的Luca提示我试着让它工作但仍然没有运气。我是这样做的。使用npm Dropzone来拖放文件和superagent（我在获取时遇到了一些错误）

...
  dropHandler (file) {
    let formData = new FormData()
    formData.append('file', file[0])

    request.post('/exchange')
      .send(formData)
      .end(function (err) {
        if (err) {
          console.log(err)
        }
      })
  }

   render () {
     return (
       ...
       <Dropzone disableClick={false} multiple={false} onDrop={this.dropHandler}>
          <div> Drop a json file, or click to add. < /div >
       </Dropzone>

    )

server.js

app.post('/exchange', (req, res) => {
  console.log(req.body)  //when i upload json file I am hitting this route but getting undefined here
})

Answer 1

这与ReactJS无关;您需要使用fetch或AJAX上传文件，因此需要FormData。

let formData = new FormData()
formData.append('file', fileUpload)
fetch(url, {
  method: 'post',
  headers: {
     // maybe you need headers, it depends from server implementation
  },
  body: formData
});

另见How to use FormData for ajax file upload

在React（客户端）上传.json文件并将其发送到Node（服务器端）

1 个答案: