파일을 FastAPI로부터 axios를 통해 업로드하세요: "업로드 파일을 기대했지만 <class 'str'>을(를) 받았습니다."

def create_image(
    classified_id: int = Form(...),
    file: UploadFile = File(...),
    db: Session = Depends(get_db),
    user: User = Security(manager, scopes=[images_create]),
) -> Any:
    # ...

브라우저의 개발자 도구의 Network 섹션에서는 file 필드를 [object Object]로 표시하지만, 제 생각에는 그것은 Blob의 문자열 표현이 없기 때문에 그냥 문제인 것 같습니다.

Swagger UI를 통해 이미지를 업로드하려고 할 때, 예상대로 동작하며 curl 요청은 다음과 같이 보입니다:

curl -X 'POST' \
  'http://localhost:8000/images' \
  -H 'accept: application/json' \
  -H 'content-length: 3099363' \
  -H 'Authorization: Bearer xxx' \
  -H 'Content-Type: multipart/form-data' \
  -F 'classified_id=2' \
  -F 'file=@Screenshot_2019-10-16-18-04-03.png;type=image/png'

여기서 무슨 문제가 있는지 어떤 아이디어가 있으신가요? 적절한 axios 요청은 어떻게 보이나요?

답변 1

다음과 같이 사용하세요 (FastAPI 엔드포인트에 따라 url 및 Accept 헤더를 변경하세요):

<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js></script>
<script type=text/javascript>
function uploadFile() {
    var formData = new FormData();
    var fileInput = document.getElementById('fileInput');
    if (fileInput.files[0]) {
        formData.append(classified_id, 2);
        formData.append(file, fileInput.files[0]);
        axios({
                method: 'post',
                url: '/upload',
                data: formData,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'multipart/form-data'
                },
            })
            .then(response => {
                console.log(response);
            })
            .catch(error => {
                console.error(error);
            });
    }
}
</script>
<input type=file id=fileInput name=file><br>
<input type=button value=submit onclick=uploadFile()>

번역 결과:

<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js></script>
<script type=text/javascript>
function uploadFile() {
    var formData = new FormData();
    var fileInput = document.getElementById('fileInput');
    if (fileInput.files[0]) {
        formData.append(classified_id, 2);
        formData.append(file, fileInput.files[0]);
        axios({
                method: 'post',
                url: '/upload',
                data: formData,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'multipart/form-data'
                },
            })
            .then(response => {
                console.log(response);
            })
            .catch(error => {
                console.error(error);
            });
    }
}
</script>
<input type=file id=fileInput name=file><br>
<input type=button value=제출 onclick=uploadFile()>

답변 2

제목: Axios에서 FastAPI로 단일 이미지 업로드하기: 예상된 UploadFile, 수신:
요즘 웹 개발에서 이미지 업로드는 매우 흔한 일로 자리잡았습니다. 사용자가 웹 페이지나 애플리케이션에 이미지를 업로드하고 서버에서 해당 이미지를 처리하는 것은 많은 서비스에서 기본적인 요구사항이 되었습니다. 그러나 종종 이미지를 서버로 업로드하는 과정에서 문제가 발생할 수 있습니다. 특히, 예상된 UploadFile, 수신: 와 같은 오류 메시지를 만나게되는 경우가 있습니다.
이 문제는 대개 Axios와 FastAPI 사이의 상호 작용에서 발생합니다. Axios는 클라이언트 측에서 사용되는 JavaScript 라이브러리로, 서버로 데이터를 보내기 위해 간편하고 직관적인 방법을 제공합니다. FastAPI는 서버 측에서 사용되는 Python 웹 프레임워크로, 빠른 속도와 간결한 구문을 통해 빠르게 API를 개발할 수 있게 해줍니다.
FastAPI를 통해 이미지를 업로드하는 경우, 클라이언트에서 이미지 파일을 FormData 형식으로 보내야 합니다. FormData는 서버로 파일을 전송하기 위한 방법으로, Axios에서도 사용할 수 있습니다. 그러나 개발자가 실수로 FormData 대신 이미지 파일의 경로를 전송하게 되면 위와 같은 오류가 발생합니다. 이 오류는 서버가 UploadFile 객체를 기대하지만 문자열 형태의 파일 경로를 받았기 때문에 발생합니다.
해결책으로는 다음과 같은 절차를 따를 수 있습니다. 먼저 Axios를 사용하여 이미지를 FormData로 변환한 다음 서버로 보냅니다. FastAPI에서는 UploadFile 형식의 객체를 사용하여 파일을 수신하므로, 해당 형식에 맞게 처리할 수 있어야 합니다. 이렇게 하면 파일이 올바르게 서버로 전송되고, FastAPI에서 필요한 처리를 수행할 수 있습니다.
이러한 오류는 프로그래밍 과정에서 자주 발생하는데, 개발자는 이를 해결하기 위해 문제의 원인을 찾고 적절한 해결책을 도출해야 합니다. 또한, 프로그래밍의 외부적인 측면인 SEO(검색 엔진 최적화)에 대해서도 고려해야 합니다. SEO는 웹 페이지나 애플리케이션을 검색엔진의 순위에 올리기 위한 중요한 요소로, 페이지 내용을 검색 엔진에 최적화하는 것을 의미합니다.
이 글은 Axios에서 FastAPI로 단일 이미지 업로드하기: '예상된 UploadFile, 수신: ’라는 주제로 작성된 글이며, 이 문제를 겪고 있는 개발자들에게 도움을 주고자 작성되었습니다. 이 글은 개발자들이 해당 오류 메시지를 이해하고 문제를 해결할 수 있는 정보를 제공합니다. 또한, 글의 제목과 내용은 SEO를 고려하여 적합한 키워드와 구조로 작성되었습니다.
정리하자면, Axios와 FastAPI를 사용하여 단일 이미지를 업로드하는 과정에서 예상된 UploadFile, 수신: 와 같은 오류 메시지를 만날 수 있습니다. 이 오류는 FormData를 사용하여 이미지를 서버로 올바르게 전송하지 않았을 때 발생하는데, 개발자는 이를 인지하고 해결책을 찾아야 합니다. SEO를 고려하여 작성한 이 글은 이러한 개발자들을 도울 수 있는 유용한 정보를 제공함과 동시에 검색 엔진에 노출되어 많은 사람들에게 도움을 줄 수 있습니다.