Heim > Web-Frontend > js-Tutorial > Hauptteil

@ts-stack/multer vereinfacht das Hochladen von Dateien in ein Node.js-basiertes Backend

WBOY
Freigeben: 2024-07-29 15:31:24
Original
676 Leute haben es durchsucht

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

Dieses Paket ist eigentlich ein Fork des bekannten nativen Pakets für ExpressJS Multer v2.0.0-rc.4. Es wird vor allem für Entwickler interessant sein, die die Programmierung im Promise-Stil anstelle von Middleware bevorzugen. Darüber hinaus ist es auch wichtig, dass dieses Paket in TypeScript geschrieben ist, sodass die darin enthaltene Typunterstützung und Kontextdokumentation erstklassig ist.

Installieren

Stellen Sie sicher, dass Node.js >= v20.0.6 installiert ist. Das Paket kann mit folgendem Befehl installiert werden:

npm install @ts-stack/multer
Nach dem Login kopieren

Verwendung

Multer gibt ein Objekt mit vier Eigenschaften zurück: formFields, file, files und groups. Das formFields-Objekt enthält die Werte der Textfelder des Formulars, das Datei-, Datei- oder Gruppenobjekt enthält die über das Formular hochgeladenen Dateien (als lesbarer Stream).

Im folgenden Beispiel wird ExpressJS nur der Einfachheit halber verwendet. Tatsächlich gibt @ts-stack/multer keine Middleware zurück und ist daher für ExpressJS weniger praktisch als das Originalmodul. Grundlegendes Anwendungsbeispiel:

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
});
Nach dem Login kopieren

Falls Sie ein mehrteiliges Nur-Text-Formular verarbeiten müssen, können Sie die Methode .none() verwenden, Beispiel:

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
});
Nach dem Login kopieren

Fehlerbehandlung

Dies ist eine Liste von Fehlercodes:

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'],
]);
Nach dem Login kopieren

Sie können diese Fehlercodes in der Eigenschaft MulterError#code sehen:

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.
    // ...
  }
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt von@ts-stack/multer vereinfacht das Hochladen von Dateien in ein Node.js-basiertes Backend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
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!