0
ich bin ziemlich neu in NodeJS und solche Sachen, und ich; ve erforschen, wie eine Datei von einem Server NodeJSNodeJS res.download (Datei)
der Upload Teil funktioniert gut, die zum Hochladen und Herunterladen Problem ist der Download-Teil
der Code i keine Fehler hat, schrieb aber jedoch die Datei selbst nicht heruntergeladen wird, habe ich keine Ahnung, wo ich schief gelaufen
hier ist meine uploadss.js Datei
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);
und hier ist die indexss.ejs Datei, die die HTML und 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>
Ich glaube, Sie das Problem konfrontiert sind beschrieben [hier] (https://stackoverflow.com/questions/4545311/download-a-file-by-jquery-ajax). – saadq
Ich denke, das ist der Weg meines Problems –