使用 Node 和 React 进行基本文件上传

Question

我已经构建了一个 React 应用程序来自学 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 函数另一个脚本。我现在遇到的错误是

无法读取未定义的属性“原型”

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

Answer 1

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