Maison > Article > interface Web > Partagez un exemple de didacticiel sur l'utilisation de nodejs multer pour télécharger et télécharger des fichiers

Partagez un exemple de didacticiel sur l'utilisation de nodejs multer pour télécharger et télécharger des fichiers

零下一度original: 2017-05-12 09:46:362070parcourir

Cet article présente principalement la mise en œuvre de nodejs multer le téléchargement de fichiers et le téléchargement des informations associées en détail. Si vous êtes intéressé, les amis peuvent le faire. reportez-vous à

L'exemple dans cet article partage le code spécifique pour nodejs pour implémenter le téléchargement et le téléchargement de fichiers pour votre référence. Le contenu spécifique est le suivant

Introduction.

J'ai réalisé une démo sur le téléchargement et le téléchargement de fichiers et j'ai choisi Multer comme middleware pour le traitement des données.

Pour plus d'informations sur multer, veuillez vous référer au document de traduction chinoise github.com/expressjs/multer/blob/master/doc/README-zh-cn.md ou au document officiel

2 . télécharger le fichier

Il est nécessaire de définir enctype="multipart/form-data" dans la balise du formulaire html, afin que le fichier puisse être téléchargé via post, lors de l'utilisation de multer côté serveur, fondamentalement le même que le site officiel, citant le middleware multer, app.post('upload', upload.single('name'), function(){}); téléchargement de fichier, et le paramètre est le nom dans l'entrée HTML, comme ceci. Le téléchargement peut réussir, mais le problème est que multer ne se soucie pas de votre suffixe. Les fichiers téléchargés dans le dossier de téléchargement ont un nom brouillé mais pas de suffixe. j'ai donc ajouté cette fonction.

req.file est des informations sur le fichier, obtenez le nom d'origine, obtenez le suffixe « .jpg » via le traitement du tableau et de la pile, utilisez la méthode fs.renameSync() pour renommer le fichier et ajoutez le suffixe original. De cette façon, le véritable téléchargement réussit. Le seul inconvénient est que le nom du fichier n'est pas modifié et qu'une erreur s'est produite lors de l'utilisation de la méthode du site officiel, je ne l'ai donc pas approfondi. .

3.download téléchargement de fichier

Internet est essentiellement l'encapsulation express de res.download et la méthode fs. Le dossier est défini sur des fichiers statiques. Le problème est qu'après avoir cliqué, le fichier à télécharger s'affichera sur une nouvelle page, qu'il s'agisse d'une image ou d'une musique. . Cela me dérange beaucoup, mais je n'ai pas trouvé de bonne solution après de longues recherches. Si vous utilisez IE pour accéder aux résultats, il y aura des options de téléchargement ou d'affichage. . Très déroutant. Quoi qu’il en soit, ça y est, je suis très satisfait du travail acharné d’une nuit. . Heehee

Serveur

//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>

[Recommandations associées]

1 Tutoriel vidéo en ligne js gratuit

2. Manuel de référence JavaScript chinois

3. php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partagez un exemple de tutoriel sur le principe d'implémentation du composant de téléchargement d'images (React + Node)Article suivant：Partagez un exemple de tutoriel sur le principe d'implémentation du composant de téléchargement d'images (React + Node)

Articles Liés

Voir plus