React（クライアント側）の.jsonファイルをアップロードしてノード（サーバー側）に送信

Question

ユーザーはローカルファイルをブラウズしてjsonファイルを選択してアップロードできます。私はそれを直接インポートしたくない。その後、私はそれをいくつかのサーバーAPIに送り、jsonファイルからデータベースにデータを保存します。問題は、jsonファイルをアップロードする方法と、そこからサーバー側のAPIにデータを送信する方法です。

JSONファイルには、次のようになります。{ "人"：[{ "名"： "ジョン"、年齢：23}、{ "名"： "ジェーン"、年齢：25}]}

Iを私はそれを動作させるためにしようとしませんが、まだ運の下ルカのヒントを使用して、この

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

EDIT のようなコンポーネントを反応させてきました。私はこれを好きでした。

... 
    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とは関係ありません（私はいくつかのフェッチでエラーを得ていた）ファイルやたSuperAgentをdragingためNPMのドロップゾーンを使用しました。 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