jQuery | js | img 전송 | 정보수정data 전송확인! | backend front 연동

어제 js를 이해하는데 힘썼고 오늘은 JS pagenation, 유저정보 업데이트를 만들어 보려고 했다.

수정 data가 전달되는건 확인했지만 완성시킨 코드는 아니라서 console 로 찍었을때 상태를 보고싶은데 누르는순간 사라져서 console.log를 확인하지 못했다.

결과물 : 

터미널에서 정보가 넘어오는걸 확인할 수 있었다.

 

처음엔 js를 최대한 작성하고 포스트맨과 프론트라이브서버를 켜서 이미지를 전송해보려고 했지만 사진이 넘어가지 않았다.

처음에는 serializer 를 수정해줬다.

UserSerilalizer를 통해 data가 저장이 될텐데 profile_image 필드가 없었기때문에 추가를 해줬다. 그리고 처음부터 하나씩 확인하기위해 프로젝트의 settings.py 에서 static, media root를 다시 설정했다.  로그인을 만들고 유저생성할때 사진을 넣어서 postman으로 data-form post를 보내서 사진이 전달되는지 확인을 한 후 js에 문제가 있는 것 같아서 마지막으로 수정을 했다.

<script>
$(document).ready(function() {
  $('#submit').click(function(){
    {
      console.log('정보 가져와서 넣기2')

      let email = $("#email").val()
      let username = $("#username").val()
      console.log(email)
      var formData = new FormData();
      formData.append("profile_image", $("#img")[0].files[0] );
      formData.append("email", email)
      formData.append("username", username)

        $.ajax({
          type:"PUT",
          url:"http://127.0.0.1:8000/user/",
          processData:false,
          contentType:false,
          data: formData,
          headers : {
                "Authorization" : "Bearer " + localStorage.getItem("access"),
          },
          success: function(data){
            console.log(data);
          },
          err: function(e){
            console.log("e:", e)
        }
      });
    };
    });
  });

</script>

append 과정에서 "profile_img"가 모델의 컬럼과 같지않아서 실행되지 않았던게 확인되었다. 수정하고나서 put으로 수정을 진행했더니 작동이 잘되었다.

 

데이터전송은 잘하지만 console을 확인하지 못하는 것과 에러발생, 알림을 하지못하는것 그리고 수정하려는 email과 username유효성검사를 하지못해서 좀 더 공부를하고 기능을 구현해 볼 생각이다.