4

編集: === 明確にするために、私はファイルをサーバーにアップロードしようとしています。

これに似た他の一般的な問題を調べましたが、問題を軽減することはできませんでした。

目的は、ファイルのアップロード機能を作成することです。フロントエンドは次のようになります。

<div class="holdingDiv">
    <form action="/file-upload" name="upload" class="dropzone dz-clickable" id="dropzoneArea" enctype="multipart/form-data">
        <input style="display:none" type="file" name="thumbnail[thumbs]" />                      
        <button id="uploadSubmitter" class="btn btn-primary btn-large" type="submit">Finished</button>
    </form>
</div>

フォーム タイプとすべてのジャズ セットアップがあります。

post リクエストを処理する server.js は次のようになります。

app.post('/file-upload', imports.upload);

また、次のものが必要であることに注意してください。

//needed for forms
app.use(express.bodyParser());

imports.upload exports 関数を呼び出すために必要な機能と同様に。

exports.upload 関数は次のようになります。

exports.upload = function (req, res) {
    console.log('FIRST TEST: ' + JSON.stringify(req.files));

    console.log('second TEST: ' +req.files.thumbnail.thumbs.name);
    //get the file extenstion:
    //console.log('size' + req.files.thumbnail.size);
  //  console.log('test this: ' + req.files.thumbnail.name);
   // var fileExtension = JSON.stringify(req.files);

    //console.log('Im getting this file type: '+ fileExtension.name);
   // console.log('this: '+req.files.upload);

    //fs.readFile(req.files.uploadFiles.path, function (err, data) {
    //    // ...
    //    var newPath = __dirname + "/uploads/"+uploadFiles.name;
    //    fs.writeFile(newPath, data, function (err) {
    //        res.redirect("back");
    //    });
    //});
}

私はそれを機能させるためにさまざまな方法を試していたので、多くのものがコメントアウトされています。オブジェクト全体として JSON Stringify で呼び出すことができますが、情報を取得できるオブジェクトとして使用したいと考えています。

req.files.thumbnail.thumbs.name

しかし、これを試してみると（JSON Stringyfiedでも）、未定義であると表示されます。

私が試したこと：

関数全体を app.js に移動します (req.body を使用して動作する小さなログイン関数があり、これで修正される可能性があると想定しました。

JSON Stringyfy を使用して、オブジェクトの特定の部分を取得します。(未定義を返します)

頭をキーボードにぶつける。(未定義を返します)

フォームのenctypeをいくつかの異なるものに変更しますが、ここでの回答のほとんどは、フォームデータがファイルのアップロードに最適なenctypeであると述べています。

なぜこれが起こっているのかについての助けと指針は大歓迎です!!

4

2 に答える 2

3

入力の名前を「thumbnails[thumb]」のままにしておく理由がわかりませんでした。method = "POST" をフォームに追加する必要があります。

name 属性を「theFile」に変更しました。これが html です。

<div class="holdingDiv">
  <form action="/file-upload" name="upload" class="dropzone dz-clickable" id="dropzoneArea" enctype="multipart/form-data" method = "post">
    <input  type="file" name="theFile" />                      
    <button id="uploadSubmitter" class="btn btn-primary btn-large" type="submit">Finished</button>
  </form>
</div>

ノードjsサーバーでこれを行います。

app.post('/file-upload',function(req,res){
    console.log('FIRST TEST: ' + JSON.stringify(req.files));
    console.log('second TEST: ' +req.files.theFile.name);
    fs.readFile(req.files.theFile.path, function (err, data) {
        var newPath = "/home/path/to/your/directory/"+req.files.theFile.name;
        fs.writeFile(newPath, data, function (err) {
          res.send("hi");  
        });
    });
});

req.files は、アップロードされたリクエストの詳細を提供する json です。

お役に立てれば。

于 2013-08-28T07:38:02.063 に答える
1

他の人は、express 4.X を使用してこのリンクにアクセスしてください。「マルチパート」ミドルウェアはサポートされなくなりました。"multiparty" や "multer" などの他のミドルウェアを使用する必要があります。

ref: TypeError: 未定義のプロパティ 'image' を読み取れません

于 2014-10-17T19:55:53.190 に答える