nodejs axios readstream 파일 업로드

1. 개요

2. 사용하는 라이브러리, 개념 설명

3. 코드

4. 그 외

 

 

 

1. 개요

노드 서버 백엔드상에서 파일을 주고 받는 경우가 있다.

그런 경우 axios나 request를 통해 주고받는데 생각보다 예제 코드가 많지 않아서 지금 사용중인 코드를 올리도록 하겠다.

reqeust로도 가능하지만 요청 실패시 catch 부분에 대한 설정을 못하는 것 같아서(찾아봐도 안나오더라) axios로 갈아탔다.

 

2. 사용하는 라이브러리, 개념 설명

사용하는 라이브러리

axios 네트워크 통신

form-data axios의 네트워크 요청 시 파일 업로드같이 특수한 형태의 요청을 설정하기 위해서 필요하다.

filesystem 파일에 대하여 관리할 수 있도록 도와주는 라이브러리 이미 fs로 쓰고 있을 가능성이 높음.

 

3가지 라이브러리를 설치하고 나면 파일 업로드에 대한 개발이 가능하다.

코드로 넘어가기 전에 간단히 어떤 플로우를 통하여 업로드 하는지 알아보자

 

1. formdata 변수 생성

2. formdata에 파일 stream 데이터 주입

3. axios에 생성해둔 formdata로 요청

 

3. 코드

//1. formdata 변수 생성
const formData = new FormData();

//2. formdata에 파일 stream 데이터 주입
formData.append("promisedParamName", fileSystem.createReadStream(`target.jpg`));

const requestConfig = {
    url: "https://mytargetsite.com/api/file/photoinfra/uploads",
    headers: {
        'Content-Type':'multipart/form-data; boundary=' + formData.getBoundary()
    },
    data: formData
}

//3. axios에 생성해둔 formdata로 요청
AxiosNetworkHelper.PostRequest(requestConfig).then(res =>{
    if(res.status === 200) console.log("성공")
    else console.log(`요청 실패 ${res.status}`)
}).catch(error => {console.log(`전송 실패 ${error}`)})

 

자세한 설명은 하지않겠다.

다만 저기서 formData.getBoundary()가 어떤 역할을 하는지 알려주겠다.

웹 request가 날아갈때 multipart의 경우 boundary라고 해서 데이터간의 구획을 나누는 역할을 해주는 표지판 역학을 하는 코드가 필요한데 그 정보를 axios의 요청에 넣어주는 것 이다.(이해 안가면 아래 웹 리퀘스트 참고)

Accept: application/json, text/plain, */*
Content-Type: application/x-www-form-urlencoded
User-Agent: axios/0.21.1
Transfer-Encoding: chunked


Content-Type: multipart/form-data; boundary=--------------------------637277032015795830863476
content-length: 67576

 

4. 그 외

현재 게시물의 예제는 단일 이미지 업로드에 대한 예제다.

근데 살다보면 단일 이미지 업로드가 아닌 2개 이상의 이미지 업로드를 해야 할 필요가 있다.

다음은 그런 경우에 대한 예제 코드를 올리도록 하겠다.

 

nodejs axios readstream 파일 업로드

nodejs axios writestream 파일 다운로드