FormData 객체, Blob 객체

• FormData 객체는 서버로 바이너리 데이터를 전달할 때 사용될 수 있다.
• Blob 객체는 파일 데이터를 저장할 수 있다.
• 클라이언트에 바이너리 데이터를 저장할 때, blob 객체에 저장할 수 있다.
• 서버에서 바이너리 데이터를 받기 위해서는 responseType을 blob으로 설정할 필요가 있다.

 

const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], 
{type : 'application/json'});
const url = window.URL.createObjectURL(blob); // 파일을 다운로드하는 url

 

•  서버에서 blob 타입으로 파일을 받아 해당 파일을 다운로드하는 URL을 생성할 수도 있다.

 

const result = await client.post(`/url`, data, { responseType: 'blob' });

 

• formData 객체를 통해 서버에 데이터를 보낼 수 있는데, 특히 바이너리 데이터를 전송할 때 사용할 수 있다.

 

const formData = new FormData();
formData.append("msg", "Hello World");
formData.append("data", {id: 1, title: "title", content: "content});
formData.append("blob", new Blob([image], { type: "image/png" }));

axios.post(url, formData)
.then(el => console.log(el));

참고 자료 : https://ko.javascript.info/formdata, https://ko.javascript.info/blob, https://developer.mozilla.org/ko/docs/Web/API/Blob, https://developer.mozilla.org/ko/docs/Web/API/FormData