Téléchargement du fichier Koa2 et téléchargement de l'exemple code_node.js

Cet article présente principalement l'exemple de code de téléchargement et de téléchargement de fichiers dans Koa2. Maintenant, je le partage avec vous et le donne comme référence. Jetons un coup d'œil ensemble

Avant-propos

Le chargement et le téléchargement sont assez courants dans les applications Web, qu'il s'agisse d'images ou d'autres fichiers. Dans Koa, il existe de nombreux middlewares qui peuvent nous aider à implémenter rapidement des fonctions.

Téléchargement de fichiers

Lors du téléchargement de fichiers dans le front-end, nous les téléchargeons via des formulaires, mais les fichiers téléchargés ne peuvent pas être transmis via ctx comme les paramètres ordinaires sur le serveur côté .request.body obtient. Nous pouvons utiliser le middleware koa-body pour gérer les téléchargements de fichiers, ce qui peut placer le corps de la requête dans ctx.request.

// app.js
const koa = require('koa');
const app = new koa();
const koaBody = require('koa-body');

app.use(koaBody({
  multipart: true,
  formidable: {
    maxFileSize: 200*1024*1024 // 设置上传文件大小最大限制，默认2M
  }
}));

app.listen(3001, ()=>{
  console.log('koa is listening in 3001');
})

Après avoir utilisé le middleware, vous pouvez obtenir le contenu du fichier téléchargé dans ctx.request.body.files. Il faut prêter attention à la définition de maxFileSize, sinon une erreur sera signalée une fois que le fichier téléchargé dépasse la limite par défaut.

Après avoir reçu le fichier, nous devons enregistrer le fichier dans le répertoire et renvoyer une URL au front-end. Le processus dans le nœud est

1. Créer un lecteur const de flux lisible = fs.createReadStream(file.path)

2. Créer un écrivain const de flux inscriptible = fs.createWriteStream('upload/newpath.txt')

3. Le flux lisible écrit le flux inscriptible via le tube reader.pipe(writer)

const router = require('koa-router')();
const fs = require('fs');

router.post('/upload', async (ctx){
 const file = ctx.request.body.files.file; // 获取上传文件
 const reader = fs.createReadStream(file.path); // 创建可读流
 const ext = file.name.split('.').pop(); // 获取上传文件扩展名
 const upStream = fs.createWriteStream(`upload/${Math.random().toString()}.${ext}`); // 创建可写流
 reader.pipe(upStream); // 可读流通过管道写入可写流
 return ctx.body = '上传成功';
})

Cette méthode convient au téléchargement d'images, de fichiers texte, de fichiers compressés, etc.

Téléchargement de fichiers

koa-send est un middleware de service de fichiers statique qui peut être utilisé pour implémenter la fonction de téléchargement de fichiers.

const router = require('koa-router')();
const send = require('koa-send');

router.post('/download/:name', async (ctx){
 const name = ctx.params.name;
 const path = `upload/${name}`;
 ctx.attachment(path);
  await send(ctx, path);
})

Il existe deux méthodes de téléchargement sur le front-end : window.open et la soumission de formulaire. Le window.open plus simple est utilisé ici.

<button onclick="handleClick()">立即下载</button>
<script>
 const handleClick = () => {
 window.open(&#39;/download/1.png&#39;);
 }
</script>

La fenêtre par défaut.open ici consiste à ouvrir une nouvelle fenêtre, à la flasher puis à la fermer, ce qui ne donne pas à l'utilisateur une bonne expérience. Vous pouvez ajouter les troisièmes deux paramètres window.open('/download/1.png', '_self');, cela sera téléchargé directement dans la fenêtre actuelle. Cependant, cela remplace la page actuelle par l'url, ce qui déclenchera des événements de page tels que beforeunload. Si votre page écoute cet événement et effectue certaines opérations, cela aura un impact. Ensuite, vous pouvez également utiliser une fenêtre iframe masquée pour obtenir le même effet.

<button onclick="handleClick()">立即下载</button>
<iframe name="myIframe" style="display:none"></iframe>
<script>
 const handleClick = () => {
 window.open(&#39;/download/1.png&#39;, &#39;myIframe&#39;);
 }
</script>

Téléchargement par lots

Il n'y a aucune différence entre le téléchargement par lots et le téléchargement unique, exécutez-le simplement quelques fois encore. Téléchargez-le. Il n’y a vraiment rien de mal à cela. Si vous regroupez autant de fichiers dans un package compressé et que vous téléchargez ensuite uniquement ce package compressé, l'expérience ne serait-elle pas meilleure ?

File Packaging

archiver est un module qui peut réaliser une fonction d'empaquetage multiplateforme dans Node.js, prenant en charge les formats zip et tar.

const router = require('koa-router')();
const send = require('koa-send');
const archiver = require('archiver');

router.post('/downloadAll', async (ctx){
 // 将要打包的文件列表
 const list = [{name: '1.txt'},{name: '2.txt'}];
 const zipName = '1.zip';
 const zipStream = fs.createWriteStream(zipName);
  const zip = archiver('zip');
  zip.pipe(zipStream);
 for (let i = 0; i < list.length; i++) {
 // 添加单个文件到压缩包
 zip.append(fs.createReadStream(list[i].name), { name: list[i].name })
 }
 await zip.finalize();
 ctx.attachment(zipName);
 await send(ctx, zipName);
})

Si vous emballez directement le dossier entier, vous n'avez pas besoin de parcourir chaque fichier et de l'ajouter au package compressé

const zipStream = fs.createWriteStream('1.zip');
const zip = archiver('zip');
zip.pipe(zipStream);
// 添加整个文件夹到压缩包
zip.directory('upload/');
zip.finalize();

Remarque : compressez le dossier entier et le fichier de package compressé généré ne peut pas être stocké dans ce dossier, sinon il continuera à être compressé.

Problèmes d'encodage chinois

Lorsque le nom du fichier contient du chinois, des situations inattendues peuvent se produire. Ainsi, lors du téléchargement, s'il contient du chinois, j'encoderai le nom du fichier avec encodeURI() pour le sauvegarder, puis je le décrypterai avec decodeURI() lors du téléchargement.

ctx.attachment(decodeURI(path));
await send(ctx, path);

ctx.attachment Définissez Content-Disposition sur « pièce jointe » pour demander au client de demander le téléchargement. Utilisez le nom du fichier décodé comme nom du fichier téléchargé à télécharger. De cette façon, lors du téléchargement local, le nom chinois sera toujours affiché.

Cependant, dans le code source de koa-send, le chemin du fichier sera décodé avec decodeURIComponent() :

// koa-send
path = decode(path)

function decode (path) {
 try {
  return decodeURIComponent(path)
 } catch (err) {
  return -1
 }
}

Decoded à ce moment-là Plus tard, j'ai téléchargé le chemin contenant les caractères chinois, et le chemin codé était stocké sur notre serveur, donc naturellement le fichier correspondant n'a pas pu être trouvé.

Pour résoudre ce problème, ne le laissez pas décoder. Si vous ne souhaitez pas toucher au code source de koa-send, vous pouvez utiliser un autre fichier middleware koa-send à la place.

const router = require('koa-router')();
const sendfile = require('koa-sendfile');

router.post('/download/:name', async (ctx){
 const name = ctx.params.name;
 const path = `upload/${name}`;
 ctx.attachment(decodeURI(path));
  await sendfile(ctx, path);
})

Recommandations associées :

Comment utiliser CORS du framework Koa2 pour compléter des requêtes ajax inter-domaines

Comment jQuery+koa2 implémente les requêtes Ajax

Exemples de téléchargement et de téléchargement de fichiers Koa2

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!