WYSIWYG (이미지)파일 업로드

12249 단어 webweb

이미지 파일을 웹 텍스트 에디터에서 어떻게 업로드하는지 알아보자.

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"]]
]

업로드 후 모달창

에디터에서 이미지 확인


  • save를 누르면 에디터에 이미지가 추가된다
  • 추가된 이미지를 눌러보면 img 태그가 에디터 안에 추가되었고 src 속성에서 가리키는 URL은 업로드 후 응답으로 받은 URL인 것을 확인 할 수 있었다.

2. 에디터에 직접 복사하는 방식으로 이미지 추가

  • 에디터에 사진을 바로 붙여넣기 하는 방식으로 추가했을 땐 서버로 전송되지 않고 브라우저에서 가지고 있다가 base64 방식으로 전달하는 것 같다.
  • 이 경우 사진이 많아져도 전송에 문제가 없는지 궁금하다.

  • 10개의 사진을 붙여넣기 방식으로 추가후 전송해서 문제가 없는지 테스트 해보았다.

  • 문제 없이 전송이 잘 되었다.

  • 저장된 페이지로 이동해서 서버에서 받을 땐 어떻게 받아오는지 확인해 보았다.

업로드 방식으로 추가한 이미지

붙여 넣기 방식으로 추가한 이미지

오늘은 여기까지 관찰하기로 하고 다음 포스트에서

  • 업로드 시 서버에서 설정해줘야 되는 것들
  • 전송 시 에디터에서 설정해줘야 하는 것들

에 대해 알아봐야겠다.

좋은 웹페이지 즐겨찾기