2017-06-11 10 views
0

ファイル; nodejsサーバーからファイルをアップロードし、ダウンロードする方法にnodejs res.download()私はnodejsとスタッフにかなり新たなんだ、と私

を研究してきましアップロード部分がうまく動作しますが、問題は、ダウンロード一部私が書いたコードにエラーがないが、しかし、自身がダウンロードされていないファイルは、私がここに

は私uploadss.jsは、ファイルの私が間違っていた見当がつかない

ある

var express = require('express'); 
var multer = require('multer'); 
var path = require('path'); 
var fs = require('fs'); 

var app = express(); 
var router = express.Router(); 

var storage = multer.diskStorage({ 
    destination: function (req, file, callback) { 
    callback(null, __dirname + '/uploads'); 
    }, 
    filename: function (req, file, callback) { 
    callback(null, Date.now() + path.extname(file.originalname)); 
    } 
}); 
var upload = multer({ storage : storage }).array('userPhoto',5); 


app.set('views', __dirname + '/views'); 
app.get('/index', function(req, res){ 
    res.render('indexss.ejs'); 
}); 

app.use('/', router); 

app.post('/api/photo', function(req, res){ 
    upload(req, res, function(err) { 
     if(err) { 
      return res.end("Error uploading file."); 
     } 
     res.end("File is uploaded"); 
    }); 
}); 

router.get('/download', function(req, res) { 
    var dir = path.resolve(".") + '/uploads/'; 
    fs.readdir(dir, function(err, list) { 
    if (err) 
     return res.json(err); 
    else 
     res.json(list); 
    }); 

}); 

router.get('/download/:file(*)', function(req, res, next){ 
    var file = req.params.file; 
    var path = require('path'); 
    var path = path.resolve(".") + '/uploads/' + file; 
    res.download(path, file, function(err){ 
    if (err){ 
     console.log(err); 
    } else { 
     console.log('downloading successful'); 
    } 
    }); 
}); 


app.listen(8080); 

とここでは、filenameパラメータでパスを上書きしているHTMLとJavaScript

<html> 
<head> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script> 

    <script> 

     $(document).ready(function() { 

      $('#uploadForm').submit(function() { 
       $("#status").empty().text("File is uploading..."); 
       $(this).ajaxSubmit({ 
        error: function(xhr) { 
         console.log(xhr); 
         status('Error: ' + xhr.status); 
        }, 
        success: function(response) { 
         $("#status").empty().text(response); 
         console.log(response) 
        } 
       }); 
       return false; 
      }); 


      $.ajax({ 
       url: "/download", 
       method: "get", 
       success: function(data){ 
        downloadArray = data; 
        for (i = 0; i < downloadArray.length; i++){ 
         console.log(downloadArray[i]); 
         console.log(typeof downloadArray[i]); 
         $('#downloadList').append("<a href='#' onclick='downloadFile(this)'>" + downloadArray[i] + "</a><br>"); 

        } 
       } 
      }); 
     }); 
     function downloadFile(selectedFile){ 
      fileToDownload = $(selectedFile).text(); 
      console.log(fileToDownload); 
      $.ajax({ 
       url: "/download/" + fileToDownload, 
       method: "get", 
       success: function(){ 
        console.log('successful downloading'); 
       } 
      }); 
     } 
    </script> 
</head> 

<body> 

    <form id="uploadForm" 
     enctype="multipart/form-data" 
     action="/api/photo" 
     method="post"> 
     <input type="file" name="userPhoto" multiple /> 
     <input type="submit" value="Upload" name="submit"> 
     <input type='text' id='random' name='random'><br> 
     <span id = "status"></span> 
    </form> 

    <div id='downloadList'></div> 
</body> 

+0

私はあなたが記載されている問題に直面していると思う[ここ](HTTPS:/(パス[ファイル名] [、FN])で

res.download(path); 

をそしてres.downloadを読む:これを試してみてください/stackoverflow.com/questions/4545311/download-a-file-by-jquery-ajax)。 – saadq

+0

私はそれが私が投稿したコードに切り替え、私が試した最初の事だった –

答えて

0

が含まれているindexss.ejsファイルです。 https://expressjs.com/en/api.html

+0

私の問題の方法だと思う。そして私はすでにそれを読んだことがあります。それは私の主要なリソースサイトです –

関連する問題