본문으로 건너뛰기

이미지 업로드

imageUploadOptions 속성을 사용하여 에디터에서 이미지 업로드 기능을 설정할 수 있습니다.

실제 동작 예제​

💡 실제로 이미지를 업로드해보세요! (로컬에서 처리되며 서버로 전송되지 않습니다)
로딩 중...
설정: 최대 5MB, JPEG/JPG/PNG/GIF 허용 •처리: 로컬 FileReader API 사용

기본 설정​

const imageUploadOptions = {
  url: null,
  extension: ['jpeg', 'jpg', 'png', 'gif'],
  maxImageSizeMB: 10,
  method: 'POST',
};

<FroalaEditor
  imageUploadOptions={imageUploadOptions}
  // ... 기타 속성
/>;

필수 조건: 서버 응답 형식​

⚠️ 중요: 서버는 반드시 다음 형식으로 응답해야 합니다:

{
  "link": "https://example.com/images/uploaded-image.jpg"
}

만약 다른 형식으로 응답한다면 customImageUploadOptions를 사용해야 합니다.

상세 설정 옵션​

업로드 URL 및 메서드​

const uploadOptions = {
  url: null,
  method: 'POST',
  maxImageSizeMB: 10,
  extension: ['jpeg', 'jpg', 'png', 'gif'],
};

주의사항​

1. 서버 응답 형식​

  • 반드시 { "link": "이미지URL" } 형식으로 응답
  • 다른 형식이면 customImageUploadOptions 사용 필요

2. 보안 고려사항​

  • 파일 타입 및 크기 검증
  • 악성 파일 업로드 방지
  • 인증 및 권한 확인

3. 성능 최적화​

  • 이미지 리사이징 및 압축
  • CDN 활용 권장
  • 적절한 캐싱 설정

imageUploadOptions를 활용하여 안전하고 효율적인 이미지 업로드 기능을 구현해보세요! 📸