➖ image upload
multipart/form-data는 선을 잘 지켜줘야 하더라구요..?
#️⃣ multipart/form-data type의 data를 axios를 이용해 strapi로 업로드하기 #️⃣
이번주의 ⛏ 퍽퍽한 삽질 이야기 ⛏ 입니다.
📜 절구절구 📜
이미지를 업로드 하는 것을 처음 도전한 것은 월요일..
strapi 서버로 이미지를 전송하는 것은 예전에도 해본 적이 있었기 때문에
어떠한 방심도, 긴장도 하지 않았건만..
프론트에서 보내는 것과 일반 서버나 axios로 보내는 것은 다른 것인지..
끝없는 error 대 잔 치 💕🌈 💐 매일 한시간씩 연구했는데도 끝까지 날 밀어내던 놈이..
드디어 목요일에 나에게 🟨 '선넘지마 선 잘 지켜' 🟨 라며 내 품으로 와주었다..
➖ code part
👊 code
import FormData from 'form-data';
import fs from 'fs';
const form_data = new FormData();
✨ const header = form_data.getHeaders(); ✨
const file_path = path.join(__dirname, '../file/FILE.jpg');
✨ const file_stream = fs.createReadStream(file_path); ✨
form_data.append('files.image', file_stream);
form_data.append('data', JSON.stringify({
FIELDNAME: FIELDDATA
});
await axios.post(URI_PATH, form_data, ✨{headers: header}✨);
💪 code logic
이미지 업로드 하는 방법?
1️⃣ 로컬 이미지 파일을 form-data로 형성한다
const file_path = path.join(__dirname, '../file/FILE.jpg');
const file_stream = fs.createReadStream(file_path);
const form_data = new FormData();
form_data.append('files.image', file_stream);2️⃣ 서버로 전송 시 multipart/form-data라는 header를 꼭 설정해줘야한다.
const header = form_data.getHeaders();
...
await axios.post(URI_PATH, form_data, {headers: header});
/* value of headers
{
'content-type': 'multipart/form-data; boundary=--------------------------653276028816157565965859'
}
*/3️⃣ 파일이 쪼개져서 이동하기 때문에, 파일들의 경계를 설정해주는 boundary를 꼭 지정해줘야한다
이 부분은 form-data객체를 형성할 때 자동으로 된다!
boundary는 원하는 값으로 임의 지정이 가능한데, 방법은 아래와 같다.
form_data.setBoundary('BOUNDARY_STRING');➖ study
✋ Extra information
-
form data란?
AJAX로 폼 전송을 가능하게 해주는 객체이다. 보통 파일을 업로드 할 때 사용된다. -
multipart/form-data란?
form data가 여러부분으로 쪼개져서 서버로 전송되는 것을 말한다.
-
boundary,선을 지키라는 것의 의미는?
multipart/form-data type으로 데이터를 전송할 것을 설정한다는 것은
위에 나와있는 개념처럼 파일을 쪼개서 전송한다는 것을 의미한다.
조각난 파일들을 나중에 모아서 합쳐야하는데,
그 경계 즉, 쪼개진 파일들의 어디까지가 원시 파일의 구성요소인지를 알려주는 것이 중요하다.
그 역할을 하는 것이 바로 boundary!!
boundary가 어떻게 위치하는지 살펴보면 아래와 같다 (console.log(form_data);)
_streams: [
//여기서부터 이미지 파일 영역
'----------------------------389101968969285569395704\r\n' +
'Content-Disposition: form-data; name="files.image"; filename="pill.jpg"\r\n' +
'Content-Type: image/jpeg\r\n' +
'\r\n',
DelayedStream {
source: [ReadStream],
dataSize: 0,
maxDataSize: Infinity,
pauseStream: true,
_maxDataSizeExceeded: false,
_released: false,
_bufferedEvents: [Array],
_events: [Object: null prototype],
_eventsCount: 1
},
[Function: bound ],
//여기서부터는 data 영역
'----------------------------389101968969285569395704\r\n' +
'Content-Disposition: form-data; name="data"\r\n' +
'\r\n',
'{"product_name":"테스트"}',
[Function: bound ]
],
_currentStream: null,
_insideLoop: false,
_pendingNext: false,
//boundary값을 따로 지정해주지 않으면 자동으로 설정해줌!
_boundary: '--------------------------389101968969285569395704'⛏ 삽질 후기⛏
데이터를 전송할 때 가장 중요한 것은
데이터를 어떤 type으로 명시해서 전송할 지 정해야 하는 것이다.
데이터의 type을 아는 것은 간단한 한 줄의 코드를 쓰더라도 중요한 건데,
왜 이렇게 자주 놓치고 지나가는 것인지.. 앞으로 타입을 더 중요하게 생각해야겠다고 느꼈다.
타입을 하나 알게되니, 어떤 부분을 신경써야 하는지가 줄줄이 해결되는게 참 어이없고 재밌다.
내가 선을 안 지켜서 이 사태가 났다는게 너무 웃겼다.
평소에 선 잘지키려고 용을 쓰는 성격인데, 데이터는 너무 만만하게 본 듯 하다ㅋ
reference
what is form data ? https://2ham-s.tistory.com/307
what is form data ? https://velog.io/@bsy/FormData
what is multipart/form-data? https://velog.io/@bclef25/multipart-form-data-upload
