트위터 api 이미지 업로드

지난번 글에서는 oauth 1.0 방식으로 트위터 api와 연동하는 방법에 대해 알아보았다. 왜 oauth 1.0을 해야 하는 걸까 고민했는데 이미지 업로드 기능은 아무래도 1.0에서만 가능한 듯 하다. 그러면 이미지 업로드를 하는 방법을 알아보자. 하고 나면 별 거 아니지만 처음 하면 역시나 머리가 아프다.

media upload

이미지 업로드의 url은 아래와 같다.
https://upload.twitter.com/1.1/media/upload.json
문서는 여기 있다.
https://developer.twitter.com/en/docs/twitter-api/v1/media/upload-media/api-reference/post-media-upload-init

단순히 한 장만 업로드 할 것이다.

일단 이미지 업로드를 하기 위해서는 이미지를 당연히 그냥은 못 올리고 바이너리 처리를 해야 한다. base 64 방식으로 업로드 할 것이다. 그리고 이미지는 내가 서버에 갖고 있는 것이 아니라 인터넷에 이미 올라온 이미지 url을 base 64 인코딩으로 변환하여 올릴 것이다.

이미지 url을 인코딩

이미지 url을 base64로 인코딩 하는 함수를 만든다. axios를 쓴다.

import axios from 'axios';

const imageToBinary = async (url) => {
  const res = await axios.get(url, {
    responseType: 'arraybuffer',
  });

  return Buffer.from(res.data, 'binary').toString('base64');
};

export default imageToBinary;

미디어 업로드

이제 저걸 업로드 해야 하는데 form data로 보낼 것이다. form data에 파일을 추가해야 하는데 그건 이렇게 하면 된다.

import FormData from 'form-data'; //설치해야함

 const frm = new FormData();
    frm.append('media_data', data);

data는 위에서 만든 문자열이다

이제 axios로 전송하면 되는데 헤더에 Content-Type을 multipart/form-data로 바꿔야 하는 걸 잊지 말자.

...
      const res = await axios({
        url,
        method,
        data,
        headers: {
          Authorization: header,
          'Content-Type': multipart/form-data
        },
      });
...

이때 oauth 1.0의 oauth_signature계산을 어떻게 할지 좀 고민 되는데 data는 계산할 때 넣지 않는다. 그러니까, 지난번 글에서 한 그대로 하면 된다.

트윗에 이미지 첨부

정상적으로 이미지 업로드가 완료 되면 응답 바디로 이와 같은 데이터를 받을 수 있다.(res.data)
여기서 필수로 필요한 건 media_id 혹은 media_id_string인데 나는 후자를 받아서 쓸 것이다.

const tweet = await bot.addTweet({
      text: 'Hello world',
      media: {
        media_ids: [imageId],
      },
    });

addTweet은 내가 임의로 만든 메서드이고, 인자로 넘기고 있는 객체가https://api.twitter.com/2/tweets에 전송되는 데이터다.text의 값에는 쓸 내용을 쓰고, media와 media_ids를 추가하고 배열로 아이디값을 넣는다. 이외에 더 많은 옵션들은 공식 문서를 보면 된다.

잘 된다