Node.js로 API를 통해 이미지를 업로드하는 방법?

개발
1

이 문제는 여러 번 질문되었지만, 지금까지의 해결책은 나에게 작동하지 않습니다.

저는 Node.js를 사용하여 API를 통해 게시물의 이미지를 업로드하고 있습니다.

게시물 생성에는 문제가 없는데, 이미지만 업로드가 되지 않습니다.

이미지(png 파일)를 바이너리 문자열로 변환합니다.

그런 다음 헤더에 API 자격 증명을 포함하고 다음과 같은 페이로드를 가진 application/json 요청을 전송합니다:

{
   type: "composer",
   synchronous: true,
   file: `${binary_string}`
}

API 문서에 나와 있듯이 파일 필드 이름으로 file을 사용하고, 또한 포럼의 다른 게시물에서 제안한 대로 files[]도 시도해 보았습니다.

file을 사용하면 다음과 같은 422 오류가 발생합니다:

undefined method `tempfile' for #<String:0x00007fdfeba2b1d8>

files[]을 사용하면 "Unprocessable Entity"라는 422 오류가 발생합니다.

문서에 나와 있듯이 application/json 외에도 Web UI에서 사용하는 방식과 이 게시자가 사용한 방식인 multipart/form-data도 시도해 보았습니다.

form-data 요청은 다음과 같이 처리했습니다:

 const form = new FormData();
 form.append("type", "composer");
 form.append("synchronous", "true");
 form.append("files[]", this.stringToBinary(file.data!), {
      contentType: file.mimetype,
 });

http.post("/uploads.json", form.getBuffer(), {
  headers: form.getHeaders(),
 }) // 자격 증명은 자동으로 추가됨

이 경우에도 file이든 files[]이든 다음과 같은 오류가 포함된 422 오류가 발생합니다:

undefined method `tempfile' for #<String:0x00007fdfeba2b1d8>

도움을 주실 수 있는 분 계신가요?

2

다음과 같이 작동하도록 만들었습니다:

import Axios from "axios";
import FormData from "form-data";
import fs from "fs";
const http = Axios.create({
  baseURL: "https://forum.zeebe.io",
  headers: {
    "Api-Key":
      "...",
    "Api-Username": "...",
    "Content-Type": "application/json",
    Accept: "application/json",
  },
});
http.interceptors.request.use((config) => {
  if (config.data instanceof FormData) {
    Object.assign(config.headers, config.data.getHeaders());
  }
  return config;
});

const filename = "/Users/sitapati/Desktop/process.png";
const file = fs.readFileSync(filename);
const form = new FormData();
form.append("files[]", file, {
  filename,
});

http
  .post("/uploads.json", form, {
    params: {
      type: "composer",
      synchronous: true,
    },
  })
  .then(({ data }) => {
    console.info("Response from Discourse", JSON.stringify(data, null, 2));
    return {
      url: data.url,
    };
  })
  .catch((e) => {
    console.error(
      "Error uploading file to Discourse",
      JSON.stringify(e, null, 2)
    );
    throw e;
  });

원격 URL에서 가져온 파일의 경우에도 작동하며, 이때는 다음과 같이 가져와야 합니다:

Axios.get(file.slackUrl, {
   responseType: "arraybuffer",
   headers: { Authorization: "Bearer " + this.slackToken },
})

여기서 핵심은 responseType: "arraybuffer"입니다.