개발 일지 36 - 게시글에 이미지 추가하기..2

어제 readimage함수가 실행이 된다고 하고 글을 마무리 지었다.

 

const readImage = function () {
    const file = this.files[0];
    const formData = new FormData();
    formData.append('image', file);

    // AJAX 요청
    $.ajax({
        url: "{% url 'post_upload_image' %}", // 이미지 업로드 URL
        type: 'POST',
        data: formData,
        processData: false, // FormData 객체를 처리하지 않도록 설정
        contentType: false, // 기본 콘텐츠 타입을 사용하지 않도록 설정
        success: function(data) {
            // 이미지 URL을 TinyMCE에 삽입
            tinymce.activeEditor.insertContent('<img alt="photo" src="' + data.location + '" style="width: 800px; height: 500px;"/>');
        },
        error: function(error) {
            console.error('Error:', error);
        }
    });

 

this.files[0]는 사용자가 선택한 파일 목록에서 첫 번째 파일(즉, 사용자가 선택한 이미지)을 가져온다.

 

FormData 객체는 웹 애플리케이션에서 데이터를 전송할 때 유용하고, 특히 파일 업로드와 같은 바이너리 데이터를 포함할 수 있다.

 

마무리로 formData.append를 해주는 것은 서버에서 파일을 처리할 때 사용한다.

 

---

 

$.ajax({...}); 서버에 비동기 요청을 보낸다.

 

이미지 업로드를 처리할 Django 뷰의 URL처리를 해주고 HTTP 메서드로 POST를 사용하여 데이터를 전송해준다. 서버에 전송할 데이터는 FormData 객체를 지정한다.

 

processData: false => jQuery가 데이터를 자동으로 변환하지 않도록 설정. FormData 객체를 직접 전송하기 때문에 이 설정이 필요하다.

 

contentType: false => 기본 콘텐츠 타입을 사용하지 않도록 설정. FormData 객체를 사용할 때는 jQuery가 기본 콘텐츠 타입을 설정하지 않도록 해야 한다.

 

성공했을 시에 ,

 

반환된 데이터에서 이미지 URL(data.location)을 가져와 TinyMCE 에디터에 <img> 태그로 삽입해준다.