Maison > interface Web > js tutoriel > @ts-stack/multer simplifie le téléchargement de fichiers vers un backend basé sur Node.js

@ts-stack/multer simplifie le téléchargement de fichiers vers un backend basé sur Node.js

WBOY
Libérer: 2024-07-29 15:31:24
original
817 Les gens l'ont consulté

@ts-stack/multer simplifies uploading files to a Node.js-based backend

Ce package est en fait un fork du package natif bien connu pour ExpressJS multer v2.0.0-rc.4. Il intéressera principalement les développeurs qui préfèrent la programmation de type Promise plutôt que le middleware. De plus, il est également important que ce package soit écrit en TypeScript, de sorte que la prise en charge des types et la documentation contextuelle qu'il contient sont de premier ordre.

Installer

Assurez-vous que Node.js >= v20.0.6 est installé. Le package peut être installé avec la commande suivante :

npm install @ts-stack/multer
Copier après la connexion

Usage

Multer renvoie un objet avec quatre propriétés : formFields, file, files et groups. L'objet formFields contient les valeurs des champs de texte du formulaire, l'objet file, files ou groups contient les fichiers (sous forme de flux lisible) téléchargés via le formulaire.

L'exemple suivant utilise ExpressJS uniquement par souci de simplicité. En fait, @ts-stack/multer ne renvoie pas de middleware, il est donc moins pratique pour ExpressJS que le module d'origine. Exemple d'utilisation de base :

import { Multer } from '@ts-stack/multer';
import express from 'express';
import { createWriteStream } from 'node:fs';

// Here `avatar`, `photos` and `gallery` - is the names of the field in the HTML form.
const multer = new Multer({ limits: { fileSize: '10MB' } });
const parseAvatar = multer.single('avatar');
const parsePhotos = multer.array('photos', 12);
const parseGroups = multer.groups([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }]);
const app = express();

app.post('/profile', async (req, res, next) => {
  const parsedForm = await parseAvatar(req, req.headers);
  // parsedForm.file is the `avatar` file
  // parsedForm.formFields will hold the text fields, if there were any
  const path = `uploaded-files/${parsedForm.file.originalName}`;
  const writableStream = createWriteStream(path);
  parsedForm.file.stream.pipe(writableStream);
  // ...
});

app.post('/photos/upload', async (req, res, next) => {
  const parsedForm = await parsePhotos(req, req.headers);
  // parsedForm.files is array of `photos` files
  // parsedForm.formFields will contain the text fields, if there were any
  const promises: Promise<void>[] = [];
  parsedForm.files.forEach((file) => {
    const promise = new Promise<void>((resolve, reject) => {
      const path = `uploaded-files/${file.originalName}`;
      const writableStream = createWriteStream(path);
      file.stream.pipe(writableStream);
      writableStream.on('finish', resolve);
      writableStream.on('error', reject);
    });
    promises.push(promise);
  });

  await Promise.all(promises);
  // ...
});

app.post('/cool-profile', async (req, res, next) => {
  const parsedForm = await parseGroups(req, req.headers);
  // parsedForm.groups is an object (String -> Array) where fieldname is the key, and the value is array of files
  //
  // e.g.
  //  parsedForm.groups['avatar'][0] -> File
  //  parsedForm.groups['gallery'] -> Array
  //
  // parsedForm.formFields will contain the text fields, if there were any
});
Copier après la connexion

Si vous devez gérer un formulaire en plusieurs parties contenant uniquement du texte, vous pouvez utiliser la méthode .none(), exemple :

import { Multer } from '@ts-stack/multer';
import express from 'express';

const parseFormFields = new Multer().none();
const app = express();

app.post('/profile', async (req, res, next) => {
  const parsedForm = await parseFormFields(req, req.headers);
  // parsedForm.formFields contains the text fields
});
Copier après la connexion

Gestion des erreurs

Voici une liste de codes d'erreur :

const errorMessages = new Map<ErrorMessageCode, string>([
  ['CLIENT_ABORTED', 'Client aborted'],
  ['LIMIT_FILE_SIZE', 'File too large'],
  ['LIMIT_FILE_COUNT', 'Too many files'],
  ['LIMIT_FIELD_KEY', 'Field name too long'],
  ['LIMIT_FIELD_VALUE', 'Field value too long'],
  ['LIMIT_FIELD_COUNT', 'Too many fields'],
  ['LIMIT_UNEXPECTED_FILE', 'Unexpected file field'],
]);
Copier après la connexion

Vous pouvez voir ces codes d'erreur dans la propriété MulterError#code :

import { Multer, MulterError, ErrorMessageCode } from '@ts-stack/multer';

// ...
try {
  const multer = new Multer().single('avatar');
  const parsedForm = await multer(req, req.headers);
  // ...
} catch (err) {
  if (err instanceof MulterError) {
    err.code // This property is of type ErrorMessageCode.
    // ...
  }
}
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal