[fs.writeFile 사용 시 [object ArrayBuffer]로 저장되는 오류 해결 가이드]
https://g.co/gemini/share/d92649206484
https://g.co/gemini/share/a6fec857a7f6
다음의 코드에서
// file.ts
const exporter = new GLTFExporter();
exporter.parse(scene, (result)=>{
const data = { buffer : result };
fetch(url, {method: 'POST', body: data })
}, {binary: true})
// api/upload
POST( req : NextRequest ) {
fs.writeFile('test.glb', req.body);
}위 코드를 실행하고 난 뒤 서버에 생성된 test.glb 파일을 열어보면 다음과 같다
[object ArrayBuffer]이유는 ArrayBuffer 나 바이너리 데이터는 api 를 호출해서 body 로 넘겨지면 브라우저가 이를 문자열로 변환을 시도하기 때문이다. 이는 body 를 직접 넣을 때 뿐만 아니라 FormData로 전달할 때도 마찬가지 이다. 따라서 바이너리 데이터 나 파일 데이터를 전달 할때는 Blob 또는 File 객체를 사용해야 한다.
따라서 다음과 같이 코드를 수정하면 문제가 해결된다.
// file.ts
const exporter = new GLTFExporter();
// exporter 의 결과물은 ArrayBuffer
exporter.parse(scene, (result)=>{
const blob = new Blob([result], { type: 'model/gltf-binary' });
const data = { buffer : blob };
fetch(url, {method: 'POST', body: data });
}, {binary: true})
// api/upload
POST( req : NextRequest ) {
fs.writeFile('test.glb', req.body);
}