[2023-06-14] Quasar fileuploader 문제 해결 422 (Unprocessable Entity) performUpload @ quasar.esm.js:36051 runFactory

 안녕하세요. 클스 입니다.

Quasar는 정말 vue3로 구현된 좋은 프레임워크 입니다. 

아직 사용자가 많지 않아서 레퍼런스가 별로 없다는 것이 문제긴 합니다.

파일 업로더가 있는데 파일을 Drag & Drop 하면 서버에 올려줍니다. 물론 서버 rest api 가 있어야 합니다.

https://quasar.dev/vue-components/uploader

그런데 메뉴얼 대로 했는데, 계속 오류가 납니다.

422 (Unprocessable Entity) performUpload @ quasar.esm.js:36051 runFactory

서버로 multi-part로 파일들을 보내는데, 서버쪽에서 files를 못받아서 문제 입니다.

RESTAPI 서버는 아래 오류를 계속 발생 시킵니다. swagger로 하면 문제없이 동작 합니다.

INFO:     127.0.0.1:59040 - "POST /api/upload/files HTTP/1.1" 422 Unprocessable Entity

fiileupload.py

@router.post("/upload/files")

async def create_upload_files(files: list[UploadFile]):

for file in files:

contents = await file.read()

with open(os.path.join(UPLOAD_DIR, file.filename), "wb") as fp:

fp.write(contents)

print(file.filename)

return {"filenames": [file.filename for file in files]}

fileupload.vue

<template>

<q-page class="bg-light-green window-height window-width row justify-center items-center">

<div class="q-pa-md">

<div class="q-gutter-sm row items-start">

<q-uploader

url="http://localhost:8001/api/upload/files"

label="Individual upload"

field-name="files" <!-- 서버에서 받을 변수명입니다. 아주 중요 -->

multiple

auto-upload

style="max-width: 300px"

/>

<q-uploader

url="http://localhost:8001/api/upload/files"

label="Batch upload"

multiple

field-name="files"

batch

style="max-width: 300px"

/>

</div>

</div>

</q-page>

</template>

오류의 원인이 이걸 안넣어줘서 그렇네요

field-name="files" <!-- 서버에서 받을 변수명입니다. 아주 중요 -->

async def create_upload_files(files: list[UploadFile]):

서버쪽에 넘겨줄 변수명이라 생각하면 됩니다. 그래서 맞춰주면 잘 올라갑니다.

아래 실행 화면에서 2개 타입이 있는데 하나는 파일을 선택하면 바로 올라가는 모드고, 다른 하나는

추가 후 upload 버튼으로 실행해줘야 합니다.

실행 화면

서버쪽에 올라간 파일 확인해보면 잘 올라가 있습니다.

이상 클스 였습니다.