React.jsとNode.jsを使ってファイルをローカルフォルダにアップロードするには？

Question

私はこのPHPとHTMLファイルのアップロードを試してみました： https://www.w3schools.com/php/php_file_upload.asp

をし、同じことがReact.js/Nodes.jsを使用して行うことができれば、私は思っていました。 私は実際にコーディングするのに慣れておらず、以前はReact.jsで作業していませんでした。

Answer 1

これを分割することができます。 Node.jsで行われるバックエンド部分です。したがって、ExpressJSのようなものをフレームワークとして使用できます。 POSTルートを追加し、ファイルのアップロードを処理します。

第2部分はリアクトです。リアクションはバックエンドシステムとは何の関係もありません。これは、GUIを構築するためにのみ使用されます。それは派手なHTMLとJavaScriptの組み合わせです。

Answer 2

あなたはこのプロセスを処理の複雑さに疑問を抱いている場合は、ここでファイルのアップロードを処理するために手ごわいパッケージを使用するコードのスニペットは、Node.jsの

である

/** UPLOAD a file **/ 
    app.post('/upload', isLoggedIn, (req, res) => { 
    // create an incoming form object 
    var form = new formidable.IncomingForm(); 

    // specify that we want to allow the user to upload multiple files in a single request 
    form.multiples = true; 

    // store all uploads in the /uploads directory 
    form.uploadDir = path.join(__dirname, '../../uploads'); 

    // every time a file has been uploaded successfully, 
    // rename it to it's orignal name 
    form.on('file', function(field, file) { 
     logger.info(`Uploaded: "${file.name}"`); 
     fs.rename(file.path, path.join(form.uploadDir, file.name)); 
    }); 

    // log any errors that occur 
    form.on('error', function(err) { 
     errorLogger.error('During file upload: ' + err); 
    }); 

    // once all the files have been uploaded, send a response to the client 
    form.on('end', function() { 
     res.end('success'); 
    }); 

    // parse the incoming request containing the form data 
    form.parse(req); 
    }); 

私の特定のクライアント側の実装のdidn Reactを使用すると、jQueryのDropzoneプラグインを使用したプレーンなHTML/Javascriptページが使用されていますが、Reactにはアップデーラーパッケージも 'react-dropzone'のように表示されています。

Hereは、node.jsでファイルをアップロードする完全なサンプルリポジトリへのリンクです。upload.jsファイルをチェックして、クライアント側のファイルストリーミングがノードサーバーにどのように行われているかを確認します。