Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 홈페이지
- jQuery Plugin
- 고도몰
- 3D프린터
- 홈페이지제작
- 제이쿼리
- 사이트제작
- JQuery
- work6.kr
- 프로그래머
- 웹개발자
- 웹퍼블리셔
- PHP
- 웹에이전시
- 쇼핑몰구축
- 웹퍼블리싱
- 워크식스
- 쇼핑몰
- 웹디자이너
- 안드로이드
- 플러그인
- 커스터마이징
- 포트폴리오
- 웹디자인
- CSS
- 홈페이지구축
- 쇼핑몰제작
- plugin
- 개발자
- 튜닝
Archives
- Today
- Total
그냥 개발자 블로그
[SvelteKit] 이미지 파일 multipart/form-data로 보내고 업로드하기 본문
- SvelteKit에서 이미지 파일을 업로드 하고자 할때
- multipart/form-data로 파일 전송하고자 할때
- 이미지파일 버퍼로 변환 시키고자 할때
+page.svelte (보내는 곳)
const handleFileChange = async (e) => {
const imgFormData = new FormData();
imgFormData.append("image",files[0]);
const response = await fetch("/api/banner/file",{
method: "POST", // *GET, POST, PUT, DELETE, etc.
headers: {
enctype: 'multipart/form-data', // 파일 형식 확인
},
body:imgFormData
});
}
+server.js (받고 업로드하는 곳)
import { json } from "@sveltejs/kit";
import { writeFile } from 'fs/promises'; // Node.js의 promise 버전 파일 시스템 모듈
import path from "path";
export async function POST({request,cookies}){
const now = new Date();
const timestamp = now.getTime();
const data = await request.formData();
const file = data.get('image');
// 파일을 저장할 경로를 지정합니다.
const uploadPath = path.join(process.cwd(), 'static', 'images', timestamp+'.'+file.name.split('.').pop());
// 파일을 서버 폴더에 저장합니다.
const imageBufferData = Buffer.from(await file.arrayBuffer());
await writeFile(uploadPath, imageBufferData);
return json({msg:'ok',file:'/static/images/'+file.name},{status:200})
}
'프로그래밍팁 > svelte' 카테고리의 다른 글
[SvelteKit] 413 에러 난다면... (0) | 2023.07.21 |
---|---|
[SvelteKit] 상위 컴포넌트 CSS 수정 방법 (0) | 2023.07.20 |
SvelteKit에서 SCSS 사용하기 (0) | 2023.07.20 |
[svelte] 배포, 서버에 업로드 (0) | 2023.05.05 |
[svelte] 개발 환경에서 https 사용하기 (0) | 2023.03.09 |