파일 업로드를 통한 Blazor SSR 구현
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Blazor SSR(서버 사이드 렌더링) 환경에서 파일 업로드 기능을 구현하는 프론트엔드/백엔드 개발자
- 난이도: 중급 (Blazor의 특성과 서버 측 처리 로직 이해 필요)
핵심 요약
- Blazor SSR에서 파일 업로드는
IFormFile
타입 사용 필수 IFormFile
을 통해 업로드된 파일을 직접 접근 가능- 폼 처리 시
enctype="multipart/form-data"
설정 필수 InputFile
컴포넌트는 양방향 바인딩 금지- 대체 접근법:
HttpContext
를 통해HttpRequest
직접 활용 가능 - 대규모 파일 처리 시 유연성 확보
- 안티포시지 토큰 추가 필수
EditForm
대신사용 시에도 포함 필요
섹션별 세부 요약
1. Blazor SSR의 파일 업로드 특성
- Blazor SSR은 클라이언트-서버 간 상호작용 없음
- 모든 폼 데이터(파일 포함)는 서버에서 일회성 처리
IFormFile
타입 사용 예시
```csharp
public class ProfileForm { public IFormFile File { get; set; } }
```
- 서버 측 처리 로직
OnSubmit
메서드에서FileStream
을 통해 파일 저장
2. 폼 구성 시 주의사항
- 폼 애트리뷰트 필수
enctype="multipart/form-data"
설정InputFile
사용 시 제한- 양방향 바인딩(
@bind
) 사용 금지,name
속성만 허용 - 예시 코드
```html
```
3. 대체 접근법: `HttpContext` 활용
HttpContext
를 통해HttpRequest
직접 접근
```csharp
[CascadingParameter] private HttpContext Context { get; set; }
```
- 장점
- 다중 파일/대규모 파일 처리 시 데이터 스트림 유연성 확보
IFormFile
대신 직접 처리 가능
4. 안티포시지 토큰 처리
EditForm
대신사용 시 필수
@Html.AntiForgeryToken()
추가 필요- 미들웨어 순서 규칙
- 안티포시지 미들웨어는 인증/인가 미들웨어 이후에 배치
결론
- Blazor SSR에서 파일 업로드는
IFormFile
과enctype="multipart/form-data"
사용을 기본으로 하되, 대규모 파일 처리 시HttpContext
를 통해HttpRequest
를 직접 조작하는 방식도 고려 - 안티포시지 토큰 추가 및 미들웨어 순서 준수는 보안 및 정상 처리 필수 조건
- Azure Storage 등 외부 저장소와의 연동은 추가 구현 필요