Nachdem Sie die Bilder gespeichert haben, können Sie sie mit diesem Code erhalten. Dadurch wird die Datei an den Benutzer gesendet. Nehmen wir an, Sie haben eine Datei mit dem Namen jeff.jpg innerhalb alles, was Sie haben, ist zu yourlink.com/files/jeff.jpg gehen, um es abzurufen. Diese
app.get('/files/:filename', function(req, res){
res.sendFile(__dirname + 'public/img/' + req.params.filename);
})
bedeutet, dass Sie auch die Bilder in Ihrem HTML-Render von nur img-Tag. Zum Beispiel
<img src="./public/img/jeff.jpg"/>
Dies ist der gesamte Code in meine main.js Datei,
var express = require('express')
var multer = require('multer')
var app = express();
var whereFilesAreStored = '/public/img';
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, __dirname + whereFilesAreStored) //you tell where to upload the files,
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
})
var upload = multer({storage: storage,
onFileUploadStart: function (file) {
console.log(file.originalname + ' is starting ...')
},
});
app.set('view engine', 'ejs');
app.get('/', function(req, res, next){
res.render('mult'); //our html document
})
app.get('/files/:filename', function(req, res){
res.sendFile(__dirname + whereFilesAreStored + '/' + req.params.filename);
})
//file upload
app.post('/post', upload.single('file'), function (req, res, next) {
console.log(req.file);
return false;
})
app.get('/ajax', function(req, res){
res.render('ajax');
})
Um die Bilder in der Client-Seite zu verwenden, habe ich eine Datei mit dem Namen Ajax getroffen, können Sie siehe oben. Das ist mein HTML.
Die Verwendung von Ajax an dieser Stelle ist nutzlos, es wird nur verwendet, um zu überprüfen, ob es Updates auf einer Seite gibt. Aber trotzdem habe ich einen kleinen Code für Ajax gemacht, damit du es sehen kannst. Verwenden Sie nicht Ajax für diese Aufgabe. Sie können <img src="thelink"/> verwenden, um die Datei auf Ihre Seite zu bekommen. Bitte überprüfe mein img Tag unten.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Anasayfa</title>
<link type="text/css" rel="stylesheet" href="/cssDosyalari/ana.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
var theUrl = 'http://localhost:2222/files/';
var fileName = "jeff.jpg";
var wholePath = theUrl + fileName;
$.ajax({
type: 'GET',
url: wholePath + fileName,
success: function(data){
console.log(data);
}
});
</script>
<img src="http://localhost:2222/files/jeff.jpg" alt="">
</body>
</html>
UPDATE
Ich habe Probleme mit der Verwendung von Ajax hatte. Irgendein Grund, der Link leitet mich weiter, also habe ich diese Lösung gefunden. Ich sende den Ajax, der Server lädt die Datei hoch und bringt den Client dazu, die Seite mit dem herauskommenden Bild neu zu laden. Ich benutze ejs + ajax hier drin. Bitte überprüfen Sie den Code unten.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
$('#my-form').submit(function(e) {
e.preventDefault();
//function myFunc(){
$.ajax({
url: '/post',
data: $('#myFile'),
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
}
})
e.preventDefault();
console.log('ajax sent');
return false;
// }
}
//onclick="myFunc()"
</script>
<form id="my-form" action="/post" method="post" enctype="multipart/form-data">
<input id="myFile" type="file" name="afile" value="">
<input type="submit" name="" value="submit">
</form>
<img id="theImgSrc" alt="">
<script type="text/javascript">
$(document).ready(function() {
$('#theImgSrc').attr('src', 'http://localhost:2222/files/<%=fileName%>').load();
});
</script>
</body>
</html>
Das ist mein main.js Datei,
app.get('/files/:filename', function(req, res){
res.sendFile(__dirname + whereFilesAreStored + '/' + req.params.filename);
})
app.get('/', function(req, res, next){
res.render('mult', {fileName: ''}); //our html document
})
app.post('/post', upload.single('afile'), function (req, res, next) {
res.render('mult', {fileName: req.file.originalname});
console.log(req.file);
})
Vielen Dank viel für die Antwort. In Ihrem Beispiel müsste ich vorher den Namen des img (jeff.png) kennen, um die Ajax-Anfrage zu stellen. Was ich will, ist das Bild hochladen, te req.file bekommen.Pfad im Backend und dann über AJAX an das Front-End. Aber ich weiß nicht, wie ich das machen soll. Kannst du helfen? –
Bitte sehen Sie das Update, ich hatte Probleme mit Ajax, tut mir leid, es lädt die Seite aus irgendeinem Grund neu. aber ich habe dieses Ding ausprobiert, wo es die Seite neu lädt und uns das Bild zeigt, wie wir es wollen. – turmuka