기본 콘텐츠로 건너뛰기

6월, 2023의 게시물 표시

[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-...

[2023-06-07] Quasar dotenv 로 multi profile 구축하기

 안녕하세요. 클스 입니다. 프로젝트를 하다보면 local, dev, test, staging, production 등 다양한 환경으로 API 주소등 환경을 다르게 가져가야 할 때가 있습니다. 이때 필요한 것이 env 파일을 이용해야 합니다. Quasar  는 process.env 를 기본으로 제공합니다. quasar.config.js에 환경 변수를 넣어주면 process.env.변수 이렇게 사용하면 됩니다. https://quasar.dev/quasar-cli-webpack/handling-process-env/ 그러나 별도 파일로 구성하면 유지관리가 직관적이고 편리하기 때문에 dotenv 패키지를 많이 사용합니다. 1) dotenv 설치하기 $ yarn add dotenv $ .env 폴더 생성 ==> project root에 생성합니다. 2) .env.local 파일 생성 후 아래 추가 APP_TITLE= ':Admin' APP_MODE= 'local-로컬' APP_VERSION= '0.6.5' API_URL= http://localhost:8001 3) quasar.config.js 에 아래 추가 /* eslint-env node */ /* * This file runs in a Node context (it's NOT transpiled by Babel), so use only * the ES6 features that are supported by your Node version. https://node.green/ */ // Configuration for your app // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js const { configure } = require( 'quasar/wrappers' ); const path = require( 'path' ); const DotEnv = req...