🗂

TypeScript (と VSCodeのREST Client) でmultipart/form-dataのデータを送受信

2022/05/02に公開

Node.js

はじめに

TypeScriptでファイルをPOSTして、それを受け取る方法がよく分かってなかったので、調べながら実装した。HTTPでmultipart/form-dataを送るときのboundaryについても少し理解が深まったので、記録。

コード

バックエンドのコードとフロントエンドのコードとテスト用のVSCodeのREST Clientのコードを整理。

multer @ バックエンド

こんな感じで受け取って、処理する。
受け取ったファイルはメモリに保存したかったので、storageにmulter.memoryStorageを指定してる。destにパスを指定したらファイルとして保存されるみたい。

import express from 'express';
import multer from 'multer';

const app = express()

const upload = multer({ storage: multer.memoryStorage() })
// const upload = multer({ dest: 'uploads/' })

app.post('/api/upload', upload.single('file'), (req: express.Request, res: express.Response, next: express.NextFunction) => {
  console.log(req.file)
})

axios @ フロントエンド

フロントエンドでaxiosを使うなら、こんな感じ。fileはBlobでも送れた。

const file = fs.createReadStream('./audio.wav');
const data = new formData();
data.append('file', file);
axios.post('/api/upload', data, {
    headers: {
        'content-type': 'multipart/form-data',
    }
})

REST Client @ VSCode

こんな感じでファイルをmultipart/form-dataとしてpostできる。バックエンド側でupload.single('file')として受け取れるように、name="file"としてデータを送ってる。

.http

### upload
POST http://localhost:8000/api/upload
Content-Type: multipart/form-data; boundary=MyBoundary

--MyBoundary
Content-Disposition: form-data; name="file"; filename="audio.wav"
Content-Type: audio/wav

< ./audio.wav
--MyBoundary--