2016-10-28 25 views
1

現在、node.jsを学習しています。最近、ウェブページ上のボタンをクリックすると、サーバーに保存されている画像をダウンロードしたいという状況に遭遇しました。私は与えられたソリューションを試みた画像nodejsサーバーからのイメージのダウンロードを処理する方法は?

をダウンロードする名前によって - ダウンロードするイメージの名前(ディレクトリが固定されている)
-
:私は、コントローラは、2つの引数を渡すに、エンドポイントを作成しました次のようにDownload a file from NodeJS Server using Express

に私は、ボタンを移入して、ダウンロードをトリガするために、角を使用しています:

<div class="btn-group" role="group" aria-label="Image tags"> 
    <button ng-repeat="tag in imageTags" type="button" class="btn btn-outline-warning" ng-click="download(tag)">{{tag}}</button> 
</div> 

そして、ここでは私のコントローラです:

、とのいずれかをクリックすると、したがって、すべてのフローは、この時点までの作品

app.get('/api/clarifai/tagDownload/:tagName/:imageName', function(req, res) { 
    // Ignore tagName for now. 
    console.log("Begin download"); 
    var img = path.resolve('image_dump/OutputDump/' + req.params.imageName); 
    // Returns the expected path for the file 
    var filename = path.basename(img); 
    var mimetype = mime.lookup(img); 

    console.log(filename); 
    console.log(mimetype); 

    res.setHeader('Content-disposition', 'attachment; filename=' + filename); 
    res.setHeader('Content-type', mimetype); 

    var filestream = fs.createReadStream(img); 
    filestream.pipe(res); 
    res.on('finish', function(){ 
     console.log("Download complete"); 
    }); 
}); 

download: function(tagName, imageName) { 
    return $http.get('/api/clarifai/tagDownload/' + tagName + "/" + imageName); 
} 

そして、ここでは私のルートファイルの関連部分だ:以下のファクトリメソッドを呼び出します

$scope.download = function(tagName) { 
    tagName = tagName.replace(/\W+/g, '-'); 
    Clarifai.download(tagName, UploadSuccess.uploadedFile) 
     // UploadSuccess.uploadedFile contains the name of the file to be downloaded. 
     .success(function(data) { 
      //do something 
     }); 
} 

ボタン、私は次のように出力を得る:

Begin download 
Jon-1477683540996.jpg 
image/jpeg 
GET /api/clarifai/tagDownload/people/Jon-1477683540996.jpg 200 5.296 ms - 
Download complete 

しかし、私はsigを参照してくださいダウンロードされたファイルのどこでもn。どのブラウザでもダイアログは表示されません。これまでに読んだことは、ダウンロードはpipeコールで処理されていると言えます。しかし、私にとっては成功しません。

私もres.download(img)を試しましたが、同じ結果が出ました。

私のアプローチは、コントローラ内のコールバックを使用してこれを処理することでした。しかし、私はそうする方法を見つけることができません。私は何が間違っている/間違っていますか?誰かが私を正しい方向に向けることができますか?

ありがとうございます。完全を期すために、ここで私はこの問題を解決する方法

+0

あなたはExpressを使用している場合は、あなただけの 'res.download(「image_dump/OutputDump /」+ REQを行うことができるはず。 params.imageName) ' – adeneo

+0

@adeneo、私はそれを試みました。しかし、運がない。ダウンロードダイアログはありません。ファイルは、デフォルトのダウンロードディレクトリにも存在しません。 –

+0

URLをブラウザに入力するだけで、ダウンロードが開始されますか?ボタンは一般的にリダイレクトされません。 – adeneo

答えて

0

です:
私のコントローラで 、代わりに使用する:

$http.get('/api/clarifai/tagDownload/' + tagName + "/" + imageName); 

私がしなければならなかった:

path = "/api/clarifai/tagDownload/" + tagName + "/" + imageName; 
$window.location.href = path; 

adeneoが指摘した通りこの理由は、Angularのボタンをクリックしてもリダイレクトされないためです。したがって、Angularの$window.location.href APIを使用してこれを手動で起動する必要がありました。

これを行うにはいくつかの別の方法も、この答えで見つけることができます:Using $window or $location to Redirect in AngularJS