๋ณดํต ํ์ผ ์ ๋ก๋๋ฅผ ๊ตฌํํ ๋ 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๋ก ๋ณด๋ด๋ฉด ๋๋ค.
'๊ฐ๋ฐ ๐พ > ReactJS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React, css] textarea ์ฌ์ฉ์ ์ฌ๋ฌ๊ฐ์ง ์ฒ๋ฆฌ (0) | 2021.12.26 |
---|---|
props๋ก ์ ๋ฌ๋๋ ํ ์คํธ ๋ผ์ธ ์ค๋ฐ๊ฟ ์ฒ๋ฆฌ๋ 2๊ฐ์ง ๋ฐฉ๋ฒ ! (2) | 2021.08.26 |
Toast ํ์ ๋ง๋ค๊ธฐ (0) | 2021.07.06 |
์ด๊ฐ๋จ useContext + useReducer (0) | 2021.07.02 |
React ์์ useRef ์ฌ์ฉํ๊ธฐ (0) | 2021.06.30 |