Question

我已经构建了一个React App来自学React和Node.js。我使用Facebook提供的样板create-react-app，它使用Webpack捆绑应用程序。我现在正在尝试在应用程序中创建上传文件功能。我偶然发现了一个名为Multer的东西，当与Express一起使用时，可以进行相当直接的文件上传。我计划使用它并表达我的应用程序的文件上传部分。以下是我试图实现的代码：

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，所以我的逻辑就是当你单击按钮提交时，会阻止默认事件，然后执行testupload函数这是从另一个脚本导入的。我现在得到的错误是

无法读取属性＆＃39;原型＆＃39;未定义的

位于request.js，所以说浏览器控制台。不确定我的方法是否是正确的逻辑，因此推进正确的方向确实会有所帮助。我发现特别棘手的是确定从前端JS到服务器端JS的交叉点到底是什么，以及我是否正在尝试在正确的位置执行服务器端JS。我还没有在网上找到关于如何做到这一点的好教程，因此我在这里发帖。如果有什么不清楚的地方请告诉我，因为我对React＆amp; amp; Node.js所以我很欣赏上面的一些代码在某些部分可能不太合乎逻辑。

Answer 1

您似乎正在尝试在React组件中导入节点代码。您要做的是将服务器代码移动到另一个项目中，然后运行服务器。您可以在服务器代码中添加app.listen(port, ....)，其中port是您的选择（默认情况下，create-react-app在3000上运行，因此选择其他内容）。然后，将您的文件上传到React应用程序POST中的代码到指定端点的文件

Node＆amp ;;基本文件上传反应

1 个答案: