Node.js 티스토리 파일 업로드 API 구현하는 방법(multipart/form-data 이놈..)

Node.js 티스토리 파일 업로드 API 구현하는 방법(multipart/form-data 이놈..)

Node.js를 활용해서 티스토리 파일 첨부 API를 사용한 경험에 대해서 공유하고자 합니다. 필자는 Node.js + Puppeteer를 활용해서 티스토리 파일 첨부 API를 구현하려고 했으나 몇 가지 시행착오가 발생했고, 많은 삽질을 통해 이 문제를 해결하여 글로 남겨둡니다.

Node.js로 티스토리 파일 첨부 API를 사용하기 위해서 우선 필자의 경우는 동적으로 이미지를 만들고, 동적으로 만든 이미지를 임시 파일 저장소에 임의의 파일 이름으로 경로를 지정하고 생성한 후, 해당 파일을 티스토리 파일 첨부 API를 활용해 업로드를 합니다.

동적 파일 생성

Node.js fs createWriteStream 메서드를 활용해서 필자는 업로드 하고자하는 이미지를 만든 후 임시 파일 저장소에 파일을 저장합니다.

const tmpdir = os.tmpdir();
const filename = `${uuidv4()}.png`;
const filepath = path.join(tmpdir, filename);
...

// 파일시스템에 저장하기 위한 파일 스트림 생성
const out = fs.createWriteStream(filepath);

티스토리 파일 첨부 API 사용 예시

평소에 xhr 처리를 하기 위해 axios 라이브러리를 자주 사용하곤 하는데 이번에 티스토리 파일 첨부 API를 사용하기 위해서 사용할 때는 이상하게 정상적으로 이미지가 업로드되지 않는 현상이 발생했습니다. 분명 axios config를 잘 설정해주거나 formdata로 전송하는 body 값을 잘 맞춰주면 해결이 될 수 있었겠지만, 필자는 axios를 갖다버리고 fetch 라이브러리로 비동기 호출을 진행했습니다.

node-fetch

골때리는 것은 axios를 버리고 fetch로 사용하자마자 정상적으로 잘 작동하는 어이없는 상황이 있었죠.. 아무튼 저와 같은 경우는 fetch 라이브러리를 활용해서 multipart/form-data로 잘 구성해서 보내니 성공적으로 티스토리 파일 첨부 API를 사용할 수 있게 되었습니다.

const uploadImage = async (path, { token, blogName }) => {
  try {
    console.log("티스토리 이미지 업로드 시작");
    const formdata = new FormData();
    formdata.append("uploadedfile", fs.createReadStream(path));
    const response = await fetch(
      `https://www.tistory.com/apis/post/attach?access_token=${token}&blogName=${blogName}&output=json`,
      { method: "POST", body: formdata }
    );
    const data = await response.json();
    console.log("티스토리 이미지 업로드 완료", data);
	
    // 임시 저장소에 저장된 파일 제거
    fs.unlinkSync(path);

    return {
      ...data.tistory,
    };
  } catch (err) {
    throw new Error(err);
  }
};

핵심은 fs.createReadStream으로 저장해둔 이미지의 경로를 가져와 스트림을 생성한 후 formdata로 append시킨 후 post api body에 담아서 전송한다는 것입니다. 제가 multipart/form-data에 대한 처리가 미숙해서 그런진 몰라도 공식 문서에 제공해주는 방법대로 처리해봤는데 잘 되지 않더라구요.

티스토리 파일 첨부 API 이슈

또 한 가지 골때리는 이슈가 있는데, 한 포스팅에 티스토리 파일 첨부 API를 활용해 업로드한 이미지를 여러 개를 올리면 1개의 이미지만 정상적으로 출력되고 나머지 이미지는 cdn에서 사라지는 기이한 현상까지 발생합니다. 해당 현상이 왜 발생하는지는 모르겠지만 아무튼 현재까지 제가 겪은 이슈는 이러합니다.