TypeScript(및 VScode의 REST Client)에서 multiper/form-data 데이터 수신

개시하다

Type Script Post 파일로 그걸 받아들이는 방법을 잘 몰라서 조사하면서 시행했습니다.HTTP가 발송multipart/form-data했을 때boundary에 대한 이해도 조금 깊어졌기 때문에 기록한 것이다.

코드

백엔드 코드와 프런트엔드 코드 및 테스트용 VSCODE의 REST 클라이언트 코드를 정리합니다.

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블로브에서도 발송이 가능하다.

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.백엔드 쪽에서 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--

끝말

바운더리가 잘 쓰고 싶진 않지만 실수로 잘 돌아가지 못해 열심히 조사해봤어요.HTTP 블랙박스가 만든 부분을 엿볼 수 있어서 좋네요.
또한 REST 클라이언트는 매우 편리합니다.

참고 자료

이 방면이 참고가 되었다.고맙기 그지없다.

Multer@ 백엔드

expressjs/multer: Node.js middleware for handling multipart/form-data .
이것을 사용하면 받은 서류를 잘 처리할 수 있습니다.

axios x form-data@ 프런트엔드

axios/axios: Promise based HTTP client for the browser and node.js
Node.js에서 Express로 파일을 업로드하는 방법입니다.com
axios와form-data를 사용하면 간단하게 발송할 수 있습니다.

REST Client @ VSCode

Huachao/vscode-restclient: REST Client Extension for Visual Studio Code multipart/form-data의post방법도 썼다.

multipart/form-data @ HTTP

Content-Type - HTTP | MDN
[HTTP] 멀티퍼/form-data의 boundary는 무엇입니까? -Qiita
바운더리 같은 거 잘 몰라서 찾아봤어요.여기 써 있어요.그래.