在React（客戶端）中上傳.json文件並將其發送到Node（服務器端）

Question

我希望用戶能夠瀏覽其本地文件，然后選擇一個json文件並上傳。 我不想直接導入。 之后，我將其發送到某個服務器api，並將數據從json文件保存到數據庫。 問題是如何上傳json文件以及如何將數據從json文件發送到服務器端api？

JSON文件如下所示：{“ people”：[{“ name”：“ Jon”，age：23}，{“ name”：“ Jane”，age：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拖動文件和超級代理（獲取時出現一些錯誤）

...
  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
});

另請參見如何使用FormData進行Ajax文件上傳