클라이언트(React)에서
const submit = async () => {
const formData = new FormData();
formData.append("image", img);
let ocr = await axios.post("http://localhost:80", formData, {
header: { "Content-Type": "multipart/form-data" },
});
};
다음과 같이 제 node express 서버로 이미지 파일을 담아 요청을 보내면
app.post("/", upload.single("image"), async (req, res) => {
fs.readFile(
`./${req.file.destination + req.file.filename}`,
"utf-8",
async (err, data) => {
let ocr = await axios.post(
"https://dapi.kakao.com/v2/vision/text/ocr",
{ image: data },
{
withCredentials: true,
headers: {
Authorization: `KakaoAK ${process.env.REST_API_KEY}`,
"Content-Type": "multipart/form-data",
},
}
);
}
);
}
제 서버에서는 멀터를 이용해서 이미지 파일을 저장하고 fs.readFile로 파일을 읽어 파일의 바이너리 형식의 데이터를 body에 담아 카카오 비전 OCR API로 요청을 보냈습니다.
계속해서 data: { code: -911, msg: ‘invalid image’ } 코드 -911이 뜨는데 이유를 알 수 있을까요…??
밑과 같이 여러 방식으로 시도해 보았지만 해결하지 못했습니다…
app.post("/", upload.single("image"), async (req, res) => {
let form = new FormData();
form.append(
"image",
fs.createReadStream(`./uploads/4e0d922f72a81a4bb0b71e20e6afe52f.png`),
{
filename: "@4e0d922f72a81a4bb0b71e20e6afe52f.png",
}
);
axios
.create({
headers: {
Authorization: `KakaoAK ${process.env.REST_API_KEY}`,
"Content-Type": "multipart/form-data",
},
})
.post("https://dapi.kakao.com/v2/vision/text/ocr", form)
.then((response) => {
console.log("???", response);
})
.catch((error) => {
console.log("!!!!!", error);
});
}