TIL | 11.23.수 [DRF ↔️ JS CRUD]

- Django Rest Framework

Front JS CRUD

 

 

[사진 업로드 .js]

// 프로필 사진 업로드 및 수정 하기
async function userProfileUpload(){
    const img = document.querySelector('#file')
    
    const formdata = new FormData()
    
    // formdata로 profile_img 경로안에 변경된 사진 저장해줘 
    formdata.append('profile_img',img.files[0])

    const response = await fetch(`http://127.0.0.1:8000/users/${userId}/profile/`, {
        headers: { 
            'Authorization': 'Bearer '+ localStorage.getItem('access')
        },
        method: 'PUT',
        body: formdata
    }
    )
}

 

 

 

 

 

[변경된 사진 받아오기 .html]

 

// 아래의 폼에 받아온 이미지가 저장되고 그 이미지를

<input class="form-control" type="file" id="file" accept="image/*">

 

→ profileView의 PUT method로 response를 보내주면서  .append로 프로필 이미지가 저장되는 경로에 저장해 주면서 프로필 이미지를 변경 해 준다.

 

 

 

 

 

[저장된 이미지를 불러오기 .js]

 // id = user_profile_img 에 json형태로 저장된 profile_img를 가져와 보여준다.
 
    const user_profile_img = response_json['profile_img']
    console.log(user_profile_img)

    const img = document.getElementById('user_profile_img')
    img.setAttribute('src', `http://127.0.0.1:8000${user_profile_img}`)