Imgur API를 사용하여 메두사 이미지 업로드

Medusa은 매우 강력하고 유용하며 오픈 소스이며 쉽게 수정할 수 있는 전자 상거래 프로젝트입니다.

그러나 기본적으로 제품 사진을 저장할 수 있는 어떠한 종류의 무료 온라인 공간도 제공하지 않습니다. 공식 문서에는 digitalOcean 및 AWS S3을 사용하여 업로드한 제품 이미지를 넣는 방법이 설명되어 있지만 해당 서비스는 유료로 사용됩니다.

결국 저는 Imgur API를 사용하여 이미지를 완전히 무료로 저장하는 한 가지 방법을 찾았습니다. 다음은 수행할 수 있는 단계입니다.

imgur 계정을 만든 다음 해당 settings page으로 이동합니다. 아래 캡처와 같이 앱의 클라이언트 ID와 비밀 키를 나열합니다.

아직 앱이 없는 경우 create one .

헤더를 선언하고 imgur API ( https://api.imgur.com/3/image )을 호출할 약속 이미지 업로드 함수를 만듭니다. (src/services의 request.js )

const headers = {
  "Content-Type": "multipart/form-data",
  Authorization: "Client-ID " + IMGUR_CLIENT_ID,
}

export const imgurUploadPromise = (formData) => {
  const apiUrl = "https://api.imgur.com/3/image"
  return axios
    .post(apiUrl, formData, {
      headers,
    })
    .then((res) => {
      console.log(res)
      return res.data.data.link
    })
    .catch((err) => console.log(err))
}

응답 형식의 링크가 res.data.data.link여야 합니다.

promise.all을 사용하여 한 번의 작업으로 여러 이미지를 업로드합니다. (src/services의 api.js)

  uploads: {
    create(files) {
      const promiseArray = []
      for (const f of files) {
        const formData = new FormData()
        formData.append("image", f)
        promiseArray.push(imgurUploadPromise(formData))
      }

      return Promise.all(promiseArray).then((values) => {
        const uploads = values.map((value) => {
          return { url: value }
        })
        return {
          data: {
            uploads,
          },
        }
      })
    },

반환 데이터 형식은 각 약속에 대해 { url: value }이어야 하고 모두에 대해 반환 데이터: { 업로드 }여야 합니다.

그러면 성공적으로 이루어질 것입니다. (5MB보다 각각 이미지를 업로드하지 마세요)