Heim > Web-Frontend > js-Tutorial > Hauptteil

Teilen Sie ein Beispiel-Tutorial zur Verwendung von NodeJS Multer zum Hoch- und Herunterladen von Dateien

零下一度
Freigeben: 2017-05-12 09:46:36
Original
2080 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Implementierung von Nodejsmulter und das Herunterladen verwandter Informationen vor. Wenn Sie interessiert sind, können Sie dies tun Weitere Informationen finden Sie unter

Das Beispiel in diesem Artikel enthält den spezifischen Code für NodeJS zum Implementieren des Datei-Uploads und -Downloads. Der spezifische Inhalt lautet wie folgt:

Einführung

Habe eine Demo zum Hoch- und Herunterladen von Dateien erstellt und Multer als Middleware für die Datenverarbeitung ausgewählt.

Informationen zu Multer finden Sie im chinesischen Übersetzungsdokument github.com/expressjs/multer/blob/master/doc/README-zh-cn.md oder im offiziellen Dokument


2 . Datei hochladen

Es ist notwendig, enctype="multipart/form-data" im HTML-Formular-Tag festzulegen, damit die Datei über hochgeladen werden kann Wenn Sie Multer auf dem Server verwenden, ist dies im Grunde dasselbe wie auf der offiziellen Website. Unter Berufung auf die Middleware von Multer gibt app.post('upload', upload.single('name'), function(){}) eine Single an Datei-Upload, und der Parameter ist der Name in der HTML-Eingabe, so Der Upload kann erfolgreich sein, aber das Problem ist, dass Multer sich nicht um Ihr Suffix kümmert. Die in den Upload-Ordner hochgeladenen Dateien haben einen verschlüsselten Namen, aber kein Suffix. Deshalb habe ich diese Funktion hinzugefügt.


req.file sind Dateiinformationen. Erhalten Sie den ursprünglichen Namen, erhalten Sie das Suffix „.jpg“ durch Array- und Stapelverarbeitung, verwenden Sie die Methode fs.renameSync(), um die Datei umzubenennen, und fügen Sie die Datei hinzu Originalsuffix. Auf diese Weise gelingt der eigentliche Upload. Der einzige Nachteil ist, dass der Dateiname nicht geändert wird und bei der Verwendung der offiziellen Website-Methode ein Fehler aufgetreten ist, sodass ich mich nicht näher damit befasst habe. .


3.Download-Datei herunterladen

Das Internet ist im Grunde eine Express-Kapselung von res.download und der fs-Methode. Achten Sie auf die Datei. Der Ordner ist auf statische Dateien eingestellt. Das Problem besteht darin, dass nach dem Klicken die herunterzuladende Datei auf einer neuen Seite angezeigt wird, egal ob es sich um ein Bild oder eine Musik handelt. . Das stört mich sehr, aber ich habe nach langem Suchen keine gute Lösung gefunden. Beim Zugriff auf die Ergebnisse über den IE stehen Optionen zum Herunterladen oder Anzeigen zur Verfügung. . Sehr verwirrend. Wie auch immer, das war's, ich bin sehr zufrieden mit meinen Bemühungen in einer Nacht. . Heehee

Server

//index.js

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

 var app = express();
 var upload = multer({dest:'upload/'});

//多文件上传 (限定上传文件个数)(没有修改后缀)
app.post('/upload-multi',upload.array('myfile',2),function(req,res,next){
  res.send("2 done");
})
//单文件上传获取信息
app.post('/upload-single',upload.single('myfile'),function(req,res,next){
  var file=req.file;
  // console.log("名称:%s",file.originalname);
  // console.log("mime:%s",file.mimetype);
//以下代码得到文件后缀
  name=file.originalname;
  nameArray=name.split('');
  var nameMime=[];
  l=nameArray.pop();
  nameMime.unshift(l);
  while(nameArray.length!=0&&l!='.'){
  l=nameArray.pop();
  nameMime.unshift(l);
  }
//Mime是文件的后缀
  Mime=nameMime.join('');
  console.log(Mime);
  res.send("done");
//重命名文件 加上文件后缀
  fs.renameSync('./upload/'+file.filename,'./upload/'+file.filename+Mime);

})

//文件下载尝试(chrome会直接在页面上展示。.最后也没有解决)
//设置download文件夹为静态 才能下载
 app.use('/download', express.static(path.join(dirname, 'download')));
// app.get('/download',function(req,res){
//   var path='./download/aa.mp3';
//   res.download(path,'aa.mp3');
// });
app.get('/download', function(req, res){
 var file = dirname + '/download/aa.mp3';
 res.download(file); 
});
app.get('/',function(req,res,next){
  res.sendFile(dirname+"/index.html");
})

app.listen(3000);
Nach dem Login kopieren
Client

//index.html

<!DOCTYPE html>
<html>
<head>
  <title>上传文件</title>
  <meta charset="utf-8">
</head>
<body>
<form enctype="multipart/form-data" action="/upload-single" method="post">
<input type="file" name="myfile"></input>
<input type="submit" value="提交"></input>
</form>

<form enctype="multipart/form-data" action="/upload-multi" method="post">
<input type="file" name="myfile"></input>
<input type="file" name="myfile"></input>
<input type="submit" value="提交"></input>
</form>
<a href="download/aa.mp3" rel="external nofollow" >下载文件</a>
</body>
</html>
Nach dem Login kopieren
[Verwandte Empfehlungen]

1.

Kostenloses js-Online-Video-Tutorial

2.

JavaScript-Referenzhandbuch für Chinesisch

3.

php.cn Dugu Jiujian (3) - JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel-Tutorial zur Verwendung von NodeJS Multer zum Hoch- und Herunterladen von Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!