WYSIWYG (이미지)파일 업로드
이미지 파일을 웹 텍스트 에디터에서 어떻게 업로드하는지 알아보자.
1. 업로드 버튼을 이용하여 이미지 추가
이미지 버튼을 누르면 업로드용 모달창 같은 것이 나온다.
업로드 아이콘을 클릭 후 이미지를 업로드를 하면
다음의 순서대로 업로드가 진행된다.
1. 이미지 업로드
1-1. 요청
- method: POST
- content-type: multipart/form-data;
- Request URL:
https://www.inflearn.com/api/files/courses/327576
- [도메인]/api/files/courses/[강의ID]
1-2. 응답
- Status code : 200
- content-type: application/json;
- data
{
"ok": true,
"id": 170219,
"user_id": 167086,
"course_id": 327576,
"use": "editor",
"name": "렌더링수정전2.PNG",
"type": "image/png",
"size": "79649",
"url": "https://cdn.inflearn.com/public/files/courses/327576/7eb203ac-647b-46e4-afc7-60400c95e150/렌더링수정전2.PNG",
"storage": "s3",
"s3_info": {
"Key": "public/files/courses/327576/7eb203ac-647b-46e4-afc7-60400c95e150/렌더링수정전2.PNG",
"key": "public/files/courses/327576/7eb203ac-647b-46e4-afc7-60400c95e150/렌더링수정전2.PNG",
"ETag": "\"38002127c1060fc6edf794d0b399db62\"",
"Bucket": "ant-man-live",
"Location": "https://ant-man-live.s3.ap-northeast-2.amazonaws.com/public/files/courses/327576/7eb203ac-647b-46e4-afc7-60400c95e150/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%88%98%EC%A0%95%EC%A0%842.PNG",
"VersionId": "g7f9DQ_rt8ey_sUrI9KHhlO65PqxUONs"
},
"vimeo_info": null,
"vimeo_uploaded": false,
"deleted_file": false,
"created_at": "2021-10-13T14:37:06.857Z",
"updated_at": "2021-10-13T14:37:06.857Z",
"deleted_at": null,
"vod_id": null,
"vod_status": null,
"resource_info": null,
"vod_info": null,
"is_uploaded": true,
"duration": null,
"is_drm": false,
"drm_status": "NOT_CONVERTED"
}
2. 업로드한 이미지 가져오기
- Request URL을 들어가보니 저장된 이미지가 있는 URL 이다.
2-1. 요청
- method : GET
- Reqeust URL : 업로드한 이미지가 저장되어 있는 스토리지
2-2. 응답
- content-type: image/png
3. 뭔지 모르겠지만 resource 요청
3-1. 요청
- method: POST
- content-type: text/plain;
- Request Payload
[
"38fc19d0-a391-5948-8881-7c2a531963ce",
[
[
"https://cdn.inflearn.com/public/files/courses/327576/7eb203ac-647b-46e4-afc7-60400c95e150/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%88%98%EC%A0%95%EC%A0%842.PNG",
35,
null
]
]
]
3-2. 응답
- status code: 200
4. 뭔진 모르겠지만 ajax-v2 요청
4-1. 요청
- Reqeust payload
[
"38fc19d0-a391-5948-8881-7c2a531963ce",
[["/api/files/courses/327576",[349,22],[0,0],200,"POST"]]
]
업로드 후 모달창
- Source : https://cdn.inflearn.com/public/files/courses/327576/7eb203ac-647b-46e4-afc7-60400c95e150/렌더링수정전2.PNG
- Image title: 렌더링수정전2.PNG
- Width / Height : 884 / 739
에디터에서 이미지 확인
- save를 누르면 에디터에 이미지가 추가된다
- 추가된 이미지를 눌러보면 img 태그가 에디터 안에 추가되었고 src 속성에서 가리키는 URL은 업로드 후 응답으로 받은 URL인 것을 확인 할 수 있었다.
2. 에디터에 직접 복사하는 방식으로 이미지 추가
- 에디터에 사진을 바로 붙여넣기 하는 방식으로 추가했을 땐 서버로 전송되지 않고 브라우저에서 가지고 있다가 base64 방식으로 전달하는 것 같다.
- 이 경우 사진이 많아져도 전송에 문제가 없는지 궁금하다.
-
10개의 사진을 붙여넣기 방식으로 추가후 전송해서 문제가 없는지 테스트 해보았다.
-
문제 없이 전송이 잘 되었다.
-
저장된 페이지로 이동해서 서버에서 받을 땐 어떻게 받아오는지 확인해 보았다.
업로드 방식으로 추가한 이미지
붙여 넣기 방식으로 추가한 이미지
- 붙여넣기 방식으로 추가한 이미지의 경우 원본 크기를 그대로 살린 것 같아 보였다.
- Intrinsic size : 원본 사이즈
- 그래서 파일 크기에서도 차이가 있었다.
- 이미지 태그에 표시되는 것에도 차이가 있었다.
- 업로드 방식으로 추가한 이미지는 width와 height값 표시되고 파일도 png로 업로드 되었지만, 붙여넣기 방식으로 추가한 이미지는 blob형태로 추가 되었다.
- 업로드 되는 위치는 같았다.
- src="https://cdn.inflearn.com/public/files/courses/327576/7eb203ac-647b-46e4-afc7-60400c95e150/렌더링수정전2.PNG"
- https://cdn.inflearn.com/public/files/courses/327576/d2a5640d-86b3-42cb-86df-369cc130a304/blob
- storage도메인/public/files/courses/[강의id]/[알수없는 폴더]/파일명
- data-mce-src라는 속성과 src속성에 같은 url이 추가되었다.
오늘은 여기까지 관찰하기로 하고 다음 포스트에서
- 업로드 시 서버에서 설정해줘야 되는 것들
- 전송 시 에디터에서 설정해줘야 하는 것들
에 대해 알아봐야겠다.
Author And Source
이 문제에 관하여(WYSIWYG (이미지)파일 업로드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gth1123/WYSIWYG-이미지파일-업로드저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)