ホームページ >ウェブフロントエンド >jsチュートリアル >@ts-stack/multer により、Node.js ベースのバックエンドへのファイルのアップロードが簡素化されます

@ts-stack/multer により、Node.js ベースのバックエンドへのファイルのアップロードが簡素化されます

WBOY
WBOYオリジナル
2024-07-29 15:31:24825ブラウズ

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

このパッケージは実際には、ExpressJS multer v2.0.0-rc.4 のよく知られたネイティブ パッケージのフォークです。これは主に、ミドルウェアではなく Promise スタイルのプログラミングを好む開発者にとって興味深いものとなるでしょう。さらに、このパッケージが TypeScript で書かれていることも重要です。そのため、パッケージ内の型サポートとコンテキスト ドキュメントは一流です。

インストール

Node.js >= v20.0.6 がインストールされていることを確認してください。パッケージは次のコマンドでインストールできます:

npm install @ts-stack/multer

使用法

Multer は、formFields、file、files、groups の 4 つのプロパティを持つオブジェクトを返します。 formFields オブジェクトにはフォームのテキスト フィールドの値が含まれ、ファイル、ファイルまたはグループ オブジェクトにはフォーム経由でアップロードされたファイル (読み取り可能なストリームとして) が含まれます。

次の例では、簡素化のためだけに ExpressJS を使用しています。実際、 @ts-stack/multer はミドルウェアを返さないため、ExpressJS にとっては元のモジュールよりも利便性が低くなります。基本的な使用例:

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
});

テキストのみのマルチパートフォームを処理する必要がある場合は、.none() メソッドを使用できます。例:

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
});

エラー処理

これはエラー コードのリストです:

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'],
]);

次のエラー コードは、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.
    // ...
  }
}

以上が@ts-stack/multer により、Node.js ベースのバックエンドへのファイルのアップロードが簡素化されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。