Heim > Artikel > Web-Frontend > Teilen Sie ein Beispiel-Tutorial zur Verwendung von NodeJS Multer zum Hoch- und Herunterladen von Dateien

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

零下一度Original: 2017-05-12 09:46:362068Durchsuche

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(&#39;fs&#39;)
var express = require(&#39;express&#39;)
var multer = require(&#39;multer&#39;)
const path = require(&#39;path&#39;);

 var app = express();
 var upload = multer({dest:&#39;upload/&#39;});

//多文件上传 （限定上传文件个数）（没有修改后缀）
app.post(&#39;/upload-multi&#39;,upload.array(&#39;myfile&#39;,2),function(req,res,next){
  res.send("2 done");
})
//单文件上传获取信息
app.post(&#39;/upload-single&#39;,upload.single(&#39;myfile&#39;),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(&#39;&#39;);
  var nameMime=[];
  l=nameArray.pop();
  nameMime.unshift(l);
  while(nameArray.length!=0&&l!=&#39;.&#39;){
  l=nameArray.pop();
  nameMime.unshift(l);
  }
//Mime是文件的后缀
  Mime=nameMime.join(&#39;&#39;);
  console.log(Mime);
  res.send("done");
//重命名文件 加上文件后缀
  fs.renameSync(&#39;./upload/&#39;+file.filename,&#39;./upload/&#39;+file.filename+Mime);

})

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

app.listen(3000);

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>

[Verwandte Empfehlungen]

Kostenloses js-Online-Video-Tutorial

JavaScript-Referenzhandbuch für Chinesisch

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!

Stellungnahme：

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

Vorheriger Artikel：Teilen Sie ein Beispiel-Tutorial zum Implementierungsprinzip der Bild-Upload-Komponente (React + Node).Nächster Artikel：Teilen Sie ein Beispiel-Tutorial zum Implementierungsprinzip der Bild-Upload-Komponente (React + Node).

In Verbindung stehende Artikel

Mehr sehen