在React(客户端)上传.json文件并发送给Node(服务器端)

我想要一个用户能够浏览他们的本地文件select一个json文件并上传它。 我不想直接导入它。 之后,我将它发送到一些服务器API,并将数据从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> ) 

编辑使用下面的卢卡提示我尝试使其工作,但仍然没有运气。 我是这样做的。 使用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 }) 

       

网上收集的解决方案 "在React(客户端)上传.json文件并发送给Node(服务器端)"

这与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进行ajaxfile upload