본문으로 바로가기

    function post_create() {
        let content = $("#content").val()
        let category = $("select[name=category]").val()
        let title = $("#title").val()
        let formData = new FormData();

        formData.append("content", content)
        formData.append("category", category)
        formData.append("title", title)
        const formFile = $("#img")[0];
        if (formFile.files.length === 0) {
        } else {
          formData.append("img", formFile.files[0]);
        }
        console.log("제목",title)
        console.log("내용",content)
        console.log("폼데이터",formData)
        console.log("카테고리",category)

js에서 파일을 form형태로 보내주기위해 append를 했는데 append가 글자형식으로 들어가면서 에러가뜬 것 같다. 그리고 if가 없을때 사진파일이 정상적으로 들어가지 않았다. 그리고 백엔드 부분에서는  시리얼라이저에서 이미지필드를 빼고 리드온리에서도 제거를 했다.

그리고 백엔드 함수에서 partial 을 추가해서 원래있던 파일이 있다면 그대로 저장하는 로직을 추가했다 ( 이후에 정확하게 partial때문에 작동이 잘되는건지 확인이 필요)

    def put(self, request, post_id): #수정
        post=get_object_or_404(Post, id=post_id)
        if request.user == post.user:
            serializer=PostCreateSerializer(post, data=request.data, partial=True)

결과적으로 db에 저장이 되고 프론트에도 사진이 나오는걸 확인했다.