> 웹 프론트엔드 > JS 튜토리얼 > @ts-stack/multer는 Node.js 기반 백엔드에 파일 업로드를 단순화합니다.

@ts-stack/multer는 Node.js 기반 백엔드에 파일 업로드를 단순화합니다.

WBOY
풀어 주다: 2024-07-29 15:31:24
원래의
817명이 탐색했습니다.

@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의 네 가지 속성이 있는 개체를 반환합니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿