使用Node＆React进行基本的file upload
我已经构build了一个React App来教自己React和Node.js 我正在使用由Facebook提供的样板名为create-react-app的样板，它使用Webpack捆绑应用程序。 我现在在哪里我试图创build应用程序中的上传文件function。 我偶然发现了一个叫做Multer的东西，当它和Express一起使用的时候，它可以相当简单地上传文件。 我打算使用这个和expression我的应用程序的file upload部分。 这是下面的代码与我想要实现的：
App.js：
import React from 'react'; import testupload from './testupload/testupload'; var App = React.createClass({ testUpload(e) { e.preventDefault(); testupload(); }, render() { return (<div className="outer-most-container"> <form encType='multipart/form-data'> <input type="file" method="post"/> <button type="submit" onClick={this.testUpload}>submit</button> </form> </div>) }) export default App;
testupload.js：
var express = require('express') var multer = require('multer') var upload = multer({ dest: 'uploads/' }) var app = express() var testupload = function() { app.post('/profile', upload.single('avatar'), function(req, res, next) {}) app.post('/photos/upload', upload.array('photos', 12), function(req, res, next) {}) var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }]) app.post('/cool-profile', cpUpload, function(req, res, next) {}) } export default testupload;
我习惯使用PHP来处理file upload，所以我的逻辑是当你点击button提交时，防止了默认事件，然后执行从另一个脚本导入的testupload函数。 我现在得到的错误是
无法读取未定义的属性“原型”
这是在request.js所以说浏览器控制台。 不知道我的方法在这里是否是正确的逻辑，所以向正确的方向推真正的帮助。 我发现特别困难的是确定从前端JS到服务器端JS的交叉是什么，如果我试图在正确的地方执行服务器端JS。 我还没有find任何好的教程如何做到这一点，所以我在这里发布。 请让我知道，如果有什么不清楚，因为我是相当新的React＆ Node.js所以我赞赏上面的代码可能不是很合逻辑的一些地方。
它看起来像你试图导入你的节点代码在你的React组件。 你想要做的是将你的服务器代码移动到另一个项目，并运行一个服务器。 你可以添加一个app.listen(port, ....)到你的服务器代码，其中port是你的select（create-react-app默认运行3000，所以select其他的东西）。 然后，在React应用程序中将file upload代码发送到指定的端点