ノードとリアクトリーを使った基本的なファイルアップロード

Question

自分で教えるためにReact Appを構築しましたReactとNode.jsです。私はcreate-react-appというWebpackという名前のFacebookで提供されている定型文を使ってアプリケーションをバンドルしています。私は今どこに私はアプリ内でファイルのアップロード機能を作成しようとしているポイントです。私は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指定したエンドポイントのファイル