2016-05-01 48 views
0

私は現在ダッシュボードで作業しており、数時間後に立ち往生しています...私がしたいのは、3つの<input type="file">(2つは複数のファイル、1つではありません)、それぞれがサーバーの3つの異なるポストメソッドにポストします。サーバーサイドでログをコンソールに記録しようとすると、データは空になります({})。私はなぜ、誰かが私はこの問題を解決するのを助けることができる理解できないのですか?フォームからサーバーにファイルをアップロードする

私はangularjsとnodejs btwを使用しています。 (ファイルとパスがダミー名)

HTML::

<form role="form" enctype="multipart/form-data"> 
     <div class="form-group"> 
      <label for="file1">File1:</label> 
      <input type="file" id="file1" accept=".txt, .json" multiple> 
     </div> 
     <div class="form-group"> 
      <label for="file2">File2:</label> 
      <input type="file" id="file2" accept=".json"> 
     </div> 
     <div class="form-group"> 
      <label for="file3">File3:</label> 
      <input type="file" id="file3" multiple> 
     </div> 
     <button type="button" ng-click="save()" class="btn btn-default"> Save</button> 
    </form> 

JS:

module.exports = function($scope, $http) { 
     $scope.save = function() { 
       file1(document.getElementById('file1').files); 
       file2(document.getElementById('file2').files); 
       file3(document.getElementById('file3').files); 
     }; 

     function file1(files) { 
      $http.post('/file1', {f: files}).success(function (res) { 
       //todo 
      }); 
     }; 

     function file2(files) { 
      $http.post('/file2', {f: files}).success(function (res) { 
       //todo 
      }); 
     }; 

     function file3(files) { 
      $http.post('/file3', {f: files}).success(function (res) { 
       //todo 
      }); 
     }; 
} 

var express = require("express"), 
    fs = require("fs"), 
    bodyParser = require('body-parser'), 

    app.use(express.static("build")); 
    app.use(bodyParser()); 

    app.post('/file1', function (req, res) { 
     console.log(req.body.f) // returns empty: {} 
     // like to move files to path: a/b/c 
    }); 

    app.post('/file2', function (req, res) { 
     // like to move files to path: a/d/e 
    }); 

    app.post('/file3', function (req, res) { 
     // like to move files to path: a/f/g 
    }); 
Server.js

これは私の現在のコードが何であるかであります

更新:

答えをGrimurDから受け取った後、私はserver.jsを変更しましたが、まだ苦労しています。何かお手数ですか?

var express = require("express"), 
     fs = require("fs"), 
     bodyParser = require('body-parser'), 
     multer = require('multer'), //<-- updated 
     upload = multer({ dest: './uploads/' }) //<-- updated 

    app.use(express.static("build")); 
    app.use(bodyParser()); 
    app.use(multer({ dest: './uploads/' }).array()); // <-- updated 

    app.post('/file1', upload.array('file1'), function (req, res) { 
     console.log(req.body.f) // returns empty: {} 
     console.log(req.files); // returns undefined // <-- updated 
     // like to move files to path: a/b/c 
    }); 

    app.post('/file2', upload.single('file2'), function (req, res) { 
     console.log(req.file); // returns undefined // <-- updated 
     // like to move files to path: a/d/e 
    }); 

    app.post('/file3', upload.array('file3'), function (req, res) { 
     console.log(req.files); // returns undefined // <-- updated 
     // like to move files to path: a/f/g 
    }); 
+0

私はPHPの私の経験からanglejsやnode.jsについてよく知りませんが、ファイルをアップロードしたい場合、enctype属性に

答えて

0

ファイルをアップロードする際には、body-parserがサポートしていないmultipart/form-dataを使用する必要があります。このタイプを処理するには、特殊なミドルウェアを使用する必要があります。 Multerは私が成功に使ったようなものです。

0

入力フィールドのFileオブジェクトでFileReader.readAsDataURL(..)を使用して回避することができます。私はしばしば、ファイル入力の種類にマルチセレクト機能を使いたいので、たくさんのファイルをアップロードして、非同期にすることができます。

私は通常、入力要素のファイルプロパティにアクセスしてループします。FileReader.readAsDataURLを使用してファイルのバイナリのbase64を取得し、base64を署名付きのwebserivceメソッドに渡しますbase64用の文字列paramを受け取り、b64をバイナリに変換してビジネスに戻ります。

var fileRunner = { 
 
    files: [], 
 
    run: function(el) { 
 
    this.files = el.files; 
 
    this.read(); 
 
    }, 
 
    read: function() { 
 

 
    // begin the read operation 
 
    console.log(this.files.length); 
 
    for (var i = 0; i <= this.files.length - 1; i++) { 
 
     var reader = new FileReader(); 
 
     reader.readAsDataURL(this.files[i]); 
 
     reader.onload = this.process 
 
    } 
 

 
    }, 
 
    process: function(evt) { 
 
    var result = evt.target.result 
 
    if (result.length > 0) { 
 
     var parts = result.split(',') 
 
     var dataBsf = parts[parts.length - 1]; 
 
     console.log(dataBsf); 
 
     //call method to pass the base 64 here. 
 
    } 
 
    } 
 
};
<body> 
 
    <input id="fup" type="file" multiple="multiple" onchange="fileRunner.run(this)" /> 
 
</body>

私はそれがここにとらわれないことと、わずかにスコープ外にすべきだと思うので、私はこれまで、サーバー側のコンポーネントが含まれていませんでした。

私は出力をコンソールに記録していますが、出力を取り出してWebサービスに出力します。

さらに、 "this"を使ってonchangeのイベントハンドラのinput要素を参照しました。なぜなら、私はあなたがそれをどのように処理したいのか分からなかったからです。要素の受け渡しを許可することで、私の考えに少しばかげた前提が与えられました。

+0

ありがとう!サンプルコードがありますか? – Marrips

+0

私にいくつか与えて、私は一緒に何かを置くことができます。 – Hardrada

+0

私の返信にコードが追加されました。 – Hardrada

関連する問題