๊ฐœ๋ฐœ ๐Ÿพ/ReactJS

Axios ๋กœ ํŒŒ์ผ๊ณผ JSON ํŒŒ์ผ ๋™์‹œ์— ๋„˜๊ธฐ๊ธฐ

JOTOKKI 2023. 6. 8. 10:41
728x90

๋ณดํ†ต ํŒŒ์ผ ์—…๋กœ๋“œ๋ฅผ ๊ตฌํ˜„ํ• ๋•Œ Event ๋กœ ํŒŒ์ผ์„ ๋ฐ›์€ ํ›„ formData์— ๋‹ด์•„์„œ multipart ๋กœ ๋ณด๋‚ธ๋‹ค. 

const files = e.target.files;
const formData = new FormData();

for (let file of files) formData.append('file', file);
// ํ˜น์€
formData.append('file', file[0]);

 

๊ฐ„ํ˜น ํŒŒ์ผ ์ด์™ธ์— ์ถ”๊ฐ€ ์ •๋ณด๋ฅผ ๋ณด๋‚ผ๋•Œ๊ฐ€ ์žˆ๋Š”๋ฐ, ๊ทธ๋•Œ์—๋„ formData๋ฅผ ๋‹ด์•„์„œ ๋ณด๋‚ด๋ฉด ๋œ๋‹ค. 

...
const fileInfo = "user_type";
formData.append('type', fileInfo);

๊ทธ๋Ÿฐ๋ฐ ๋งŒ์•ฝ Object ํƒ€์ž…์„ ๋ณด๋‚ด์•ผํ•  ๋•Œ๋Š” ์–ด๋–จ๊นŒ? 

๊ธฐ๋‚˜๊ธด ์‚ฝ์งˆ+๋„์›€ ๋์— ์ฐพ์€ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ๊ฐ™๋‹ค. 

Object ํƒ€์ž…์€ ๋ณด๋‚ผ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ์šฐ์„  stringify๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ json ํ˜•ํƒœ๋กœ ๋งŒ๋“ค์–ด์•ผํ•œ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋’ค์— ์˜ต์…˜์„ ๋ถ™์—ฌ application/json ํƒ€์ž…์œผ๋กœ ํ•ด๋‹น ๋ฐ์ดํ„ฐ๋Š” ๋ณด๋‚ด๊ฒ ๋‹ค๊ณ  ์ถ”๊ฐ€๋ฅผ ํ•ด์ค˜์•ผ ํ•˜๋Š”๋ฐ, 

์ถ”๊ฐ€๋ฅผ ํ•˜๋ ค๋ฉด ํ•ด๋‹น ๋ฐ์ดํ„ฐ๋ฅผ blob ํƒ€์ž…์œผ๋กœ ๋งŒ๋“ค์–ด์•ผํ•œ๋‹ค. 

blob(Binary Large Object)๋กœ ์›๋ž˜๋Š” ๋ฐ”์ด๋„ˆ๋ฆฌ ํ˜•ํƒœ๋กœ ๊ฐ์ฒด๋ฅผ ์ €์žฅํ•˜๋Š” ๋‚ด์žฅํ•จ์ˆ˜๋กœ, ์ฃผ๋กœ ํŒŒ์ผ์„ ์ฝ์„๋•Œ ์“ฐ๋Š”๋ฐ, ์—ฌ๊ธฐ์„œ๋Š” multipart๋กœ json ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๊ธฐ ์œ„ํ•ด ์ผ๋‹ค. 

...
let dataInfo = {
    fileType: "user_type",
    categoryType: "faq_file"
}
formData.append('request', new Blob([JSON.stringify(dataInfo)], {type: 'application/json'}) );

๊ทธ๋ฆฌ๊ณ  axios์—์„œ๋Š” ๊ทธ๋ƒฅ Content-Type์„ multipart๋กœ ๋ณด๋‚ด๋ฉด ๋œ๋‹ค. 

๋ฐ˜์‘ํ˜•