Friends 프로젝트 S3 이미지업로드 , 프론트->서버 통신

오늘부터 Friends 작업을 시작하였다!

오늘 생각보다 많은 것을 시도해보고 많은 삽질도 경험하고 , 그러다보니 하루가 정말 순식간에 지나갔다

Fetch 을 이용한 서버통신

function get_cookie(name) {
    let cookie_value = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();

            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookie_value = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookie_value;
}

우선, 쿠키를 가져와야한다. 서버에서 헤더에 csrf토큰이나, 인증된 사용자에 대한 jwt토큰 쿠키값을 넘겨 주기 위해서 꼭 필요한 코드이다

    const title = document.getElementById('title').value;
    const content = document.getElementById('content').value;
    const selectFile = document.querySelector("#image_input").files[0];
    let formData = new FormData();
    formData.append('postimg', selectFile);
    formData.append('title', title);
    formData.append('content', content);

Formdata 를 제대로 써본적이 없어서, 정한이형한테 도움을 받았다! 기존의 form 으로 넘겨주거나 json 으로 넘겨주는 형식을 하는데 파일업로드는 아무파일이나 전송할 수 없은이 formdate 로 넘겨 주어야한다!

        const token = localStorage.getItem('access')
        const result = await fetch(BASE_URL + '/joo_test/', {
            method: 'POST',
            cache: 'no-cache',
            mode: 'cors',
            headers: {
                "Access-Control-Allow-Origin": "*",
                "Authorization": `Bearer ${token}`,
                // formdata 는 'content-type'명시하지 않음
                // 'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRFToken': csrftoken,
            },
            body: formData,
        }).then(res => {
            if (res.ok) {
                location.reload()
            }
        }).catch(error => {
            alert(error)
        })

Fethc 부분인데 정해진 형식이 많다 다만 formdata 는 content-type 을 같이 보내면 오류가 난다!

S3 이미지 업로드

S3이미지 업로드를 처음해보는데,, 너무 많은 글들을 보다가 딜레마에 빠졌다. 대체 뭐가 맞는거지..?

데이터가 업로드 안되길래 이상하게 정책부터해서 여러게 만져보다가 시간을 너무 많이 날렸다.

결과적으로 업로드부분에서 filename 과 bucket 이름을 명시해주지 않아서 업로드가 되지 않았다..!

s3_client = boto3.client(
            's3',
            aws_access_key_id=AWS_ACCESS_KEY_ID,
            aws_secret_access_key=AWS_SECRET_ACCESS_KEY,
            )
            file = request.FILES['postimg']
            date = (datetime.datetime.now().strftime('%Y-%m-%d-%H-%M-%S'))
            s3_client.upload_fileobj(
                    file,
                    "bucketfriends",
                    date,
                    ExtraArgs={
                        "ContentType": file.content_type,
                    }
                )

image_url = parse.urljoin(base=base_url,url=str(date),allow_fragments=True)

str을 url로 바꿔주는 로직인데, url필드에 잘 들어가지 않아서 결국 필드를 Charfield로 바꿔서 했다...

그리고 request 로 받아온 데이터들을 serializer 에 넣으려면 딕셔너리 형식으로 바꿔줘야 하니깐 딕셔너리 형태로 데이터를 넣어주

고 시리얼라이즈에 넣어서 vallid 를 통과하면 저장 성공!

오늘 그래도 목표한 작업량은 달성한거 같다.