axios post 할때 url, data
json 을 넣어서 data에 보내주면 axios 가 알아서 변환해줌.
근데 이미지는 텍스트로 변환할 수 없어.
form data를 json 이 아니라 axios 의 데이터에 넣어. post 메소드로.
1.폼 데이터를 다 보내고, 서버에서 이미지 Url 을 저장하게 하는법.
- 이미지를 업로드. 파일을 선택하자마자 저장하고 url 을 따오는것. title,content 와 함께 저장하면 미리 만들어놓은 이미지 Url 을 보내.
2가 더 쉬움.
use client.
이미지 input type = "fule" onChange = {handleChange}로
target.files[0] 번째 있는걸 꺼내.
파일 정보가 있어. name,type,size 등등 객체 형태.
axios.post("http://localhost:5050", file ); 이렇게 하면 안돼.
!!!폼 데이터를 만들어서 보내야해.
new FormData() 로 폼데이터를 만들어.
만들고, 여기에 append로 데이터를 추가.
키 값은 아무거나 써도돼. 그 뒤에 파일(value)을 넣어. 이제 그럼 키값에 파일이 들어간것!
qordpsem
- deal 안에 북마크
- deal 안에 upload resource 만들어.
@Post('image') 로 하고, uploadImage() {return 3000}
보내면 cors 가 날 수도 있어.
main 에 app.use(cors{origin: 'http://localhost:3000'})
import * as cors from 'cors'
데이터가 이렇게 하면 날라와.
useInterceptor(FileInterceptor('blabla')) 로 서버에서 데이터 받아줘. blabla 는 키값.
uploadImage(@UploadedFile() file)
-
npm i @types/multer 설치하고
-
또 똑같은 이미지를 선택하면, 이미지가 안가. onChange 를 걸어놨기 때문에 => 지금 레벨에서는 무시하자.
바이너리 형태를 객체로 바꿔주기
-
바디에 실려온 폼데이터를 여전히 바이너리 형태니까 이를 객체로 바꿔주기.
-
객체로 바꾸는걸 interceptor 가 해주는거야. 이제 받아온 버퍼를 저장해놔야해.(file 객체에 있는)
버퍼 저장하기 => 로컬의 퍼블릭에다가.
-
static 한 파일을 serving 한다.
-
const buffer = file.buffer
