Resim Y\u00fckleme Formu<\/title>\n <style>\n body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; background-color: #f4f7f6; color: #333; }\n .container { max-width: 600px; margin: 50px auto; padding: 30px; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }\n h1 { color: #007bff; text-align: center; margin-bottom: 30px; }\n form { display: flex; flex-direction: column; gap: 15px; }\n input[type=\"file\"] { border: 1px solid #ddd; padding: 10px; border-radius: 5px; background-color: #f9f9f9; }\n button { background-color: #28a745; color: white; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; }\n button:hover { background-color: #218838; }\n #message { margin-top: 20px; padding: 10px; border-radius: 5px; font-weight: bold; text-align: center; }\n #message.success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }\n #message.error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }\n #uploadedImagePreview { max-width: 100%; height: auto; margin-top: 20px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: none; }\n\n \/* Mobil uyumluluk *\/\n @media (max-width: 768px) {\n .container { margin: 20px auto; padding: 20px; }\n h1 { font-size: 24px; }\n button { width: 100%; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>Forum Resim Y\u00fckleyici<\/h1>\n <form id=\"uploadForm\">\n <label for=\"imageFile\">Y\u00fcklenecek Resmi Se\u00e7in:<\/label>\n <input type=\"file\" id=\"imageFile\" name=\"imageFile\" accept=\"image\/*\" required>\n <button type=\"submit\">Resmi Y\u00fckle<\/button>\n <\/form>\n <div id=\"message\"><\/div>\n <img decoding=\"async\" id=\"uploadedImagePreview\" src=\"\" alt=\"Y\u00fcklenen Resim \u00d6nizlemesi\">\n <\/div>\n\n <script>\n document.getElementById('uploadForm').addEventListener('submit', async function(event) {\n event.preventDefault(); \/\/ Formun varsay\u0131lan submit davran\u0131\u015f\u0131n\u0131 engelle\n\n const fileInput = document.getElementById('imageFile');\n const messageDiv = document.getElementById('message');\n const imagePreview = document.getElementById('uploadedImagePreview');\n messageDiv.textContent = ''; \/\/ Mesaj\u0131 temizle\n messageDiv.className = ''; \/\/ Stil s\u0131n\u0131f\u0131n\u0131 temizle\n imagePreview.style.display = 'none'; \/\/ \u00d6nizlemeyi gizle\n\n if (fileInput.files.length === 0) {\n messageDiv.textContent = 'L\u00fctfen bir dosya se\u00e7in.';\n messageDiv.classList.add('error');\n return;\n }\n\n const file = fileInput.files[0];\n const formData = new FormData();\n formData.append('file', file); \/\/ Backend'deki 'file' parametresiyle e\u015fle\u015fmeli\n\n try {\n const response = await fetch('\/upload-image\/', { \/\/ FastAPI endpoint URL'si\n method: 'POST',\n body: formData \/\/ FormData otomatik olarak Content-Type: multipart\/form-data ayarlar\n });\n\n const result = await response.json();\n\n if (response.ok) {\n messageDiv.textContent = result.message + ' URL: ' + result.url;\n messageDiv.classList.add('success');\n imagePreview.src = result.url; \/\/ Y\u00fcklenen resmin URL'sini \u00f6nizlemeye ata\n imagePreview.style.display = 'block'; \/\/ \u00d6nizlemeyi g\u00f6ster\n } else {\n messageDiv.textContent = 'Y\u00fckleme hatas\u0131: ' + result.detail;\n messageDiv.classList.add('error');\n }\n } catch (error) {\n messageDiv.textContent = 'A\u011f hatas\u0131 veya sunucuya ula\u015f\u0131lam\u0131yor: ' + error.message;\n messageDiv.classList.add('error');\n }\n });\n <\/script>\n<\/body>\n<\/html>\n <\/pre>\n<p><\/code><\/p>\n<p>JavaScript taraf\u0131nda, formun g\u00f6nderim olay\u0131n\u0131 (submit event) dinliyoruz. <code>event.preventDefault()<\/code> \u00e7a\u011fr\u0131s\u0131, formun geleneksel sayfa yenileme davran\u0131\u015f\u0131n\u0131 engeller. Daha sonra, se\u00e7ilen dosyay\u0131 almak i\u00e7in <code>document.getElementById('imageFile').files[0]<\/code> kullan\u0131yoruz. Bu dosyay\u0131 bir <code>FormData<\/code> nesnesine ekliyoruz. <code>FormData<\/code> objesi, <code>multipart\/form-data<\/code> format\u0131nda veri g\u00f6ndermenin modern ve kolay bir yoludur. Anahtar nokta, <code>formData.append('file', file)<\/code> sat\u0131r\u0131d\u0131r; burada ilk arg\u00fcman (<code>'file'<\/code>), FastAPI endpoint'indeki <code>file: UploadFile<\/code> parametresinin ad\u0131yla tam olarak e\u015fle\u015fmelidir.<\/p>\n<p>Fetch API'si ile <code>POST<\/code> iste\u011fini yap\u0131yoruz. <code>method: 'POST'<\/code> ve <code>body: formData<\/code> belirtmek yeterlidir; Fetch API otomatik olarak <code>Content-Type<\/code> ba\u015fl\u0131\u011f\u0131n\u0131 <code>multipart\/form-data<\/code> olarak ayarlar. Yan\u0131t\u0131 ald\u0131ktan sonra, ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z duruma g\u00f6re kullan\u0131c\u0131ya geri bildirim sa\u011fl\u0131yoruz. Ba\u015far\u0131l\u0131 y\u00fcklemelerde, sunucudan d\u00f6nen resim URL'sini al\u0131p bir <code><img id=\"uploadedImagePreview\"><\/code> etiketi i\u00e7inde g\u00f6steriyoruz, b\u00f6ylece kullan\u0131c\u0131 y\u00fckledi\u011fi resmi hemen g\u00f6rebilir. CSS i\u00e7inde bulunan <code>@media (max-width: 768px)<\/code> kural\u0131 ise, form ve butonun k\u00fc\u00e7\u00fck ekranlarda daha iyi g\u00f6r\u00fcnmesini sa\u011flayan basit bir mobil uyumluluk \u00f6rne\u011fidir. Bu entegrasyon, kullan\u0131c\u0131lar\u0131n kolayca g\u00f6rsel i\u00e7erik eklemesini sa\u011flayarak forumunuzun etkile\u015fimini art\u0131racakt\u0131r.<\/p>\n<h2>G\u00fcvenlik ve Validasyon: Y\u00fcklenen Resimleri Nas\u0131l Koruruz?<\/h2>\n<p>Resim y\u00fckleme \u00f6zelli\u011fi eklemek, beraberinde ciddi g\u00fcvenlik sorumluluklar\u0131n\u0131 da getirir. K\u00f6t\u00fc niyetli kullan\u0131c\u0131lar, sunucunuza zararl\u0131 dosyalar y\u00fckleyerek veya a\u015f\u0131r\u0131 b\u00fcy\u00fck dosyalar g\u00f6ndererek hizmetinizi etkilemeye \u00e7al\u0131\u015fabilirler. Bu nedenle, y\u00fckleme s\u00fcrecine s\u0131k\u0131 validasyon (do\u011frulama) ve g\u00fcvenlik \u00f6nlemleri entegre etmek hayati \u00f6neme sahiptir. G\u00fcvenli bir sistem, hem sunucunuzu korur hem de kullan\u0131c\u0131lar\u0131n\u0131z\u0131n verilerini g\u00fcvende tutar. FastAPI, bu t\u00fcr kontrolleri kolayca uygulaman\u0131za olanak tan\u0131r.<\/p>\n<p>\u0130lk olarak, <strong>dosya tipi do\u011frulama<\/strong> (MIME type validation) \u00e7ok \u00f6nemlidir. Sadece belirli resim formatlar\u0131n\u0131n (JPEG, PNG, GIF vb.) y\u00fcklenmesine izin vermelisiniz. Bir \u00f6nceki kod \u00f6rne\u011fimizde <code>if not file.content_type.startswith(\"image\/\")<\/code> ile basit bir kontrol yapm\u0131\u015ft\u0131k. Ancak bu yeterli olmayabilir. <code>content_type<\/code> ba\u015fl\u0131\u011f\u0131 istemci taraf\u0131ndan kolayca manip\u00fcle edilebilir. Daha sa\u011flam bir do\u011frulama i\u00e7in, dosyan\u0131n ilk birka\u00e7 bayt\u0131n\u0131 okuyarak (magic number kontrol\u00fc) dosyan\u0131n ger\u00e7ek t\u00fcr\u00fcn\u00fc sunucu taraf\u0131nda do\u011frulamak gerekir. Python'da <code>python-magic<\/code> veya <code>Pillow<\/code> gibi k\u00fct\u00fcphaneler bu konuda yard\u0131mc\u0131 olabilir. \u00d6rne\u011fin, <code>Pillow<\/code> ile bir dosyan\u0131n a\u00e7\u0131l\u0131p a\u00e7\u0131lamad\u0131\u011f\u0131n\u0131 kontrol etmek, ger\u00e7ekten bir resim dosyas\u0131 oldu\u011funu garanti etmenin g\u00fc\u00e7l\u00fc bir yoludur.<\/p>\n<p>\u0130kinci olarak, <strong>dosya boyutu s\u0131n\u0131r\u0131<\/strong> koymak, hizmet reddi (DoS) sald\u0131r\u0131lar\u0131n\u0131 ve sunucunuzun depolama alan\u0131n\u0131n a\u015f\u0131r\u0131 kullan\u0131lmas\u0131n\u0131 \u00f6nler. \u00c7ok b\u00fcy\u00fck resimler, hem y\u00fckleme s\u00fcresini uzat\u0131r hem de sunucu kaynaklar\u0131n\u0131 t\u00fcketir. FastAPI'de bu kontrol\u00fc kolayca uygulayabilirsiniz. \u00d6rne\u011fin, <code>file.size<\/code> \u00f6zelli\u011fini kullanarak dosyan\u0131n boyutunu byte cinsinden alabilir ve belirli bir \u00fcst s\u0131n\u0131r\u0131n \u00fczerinde olup olmad\u0131\u011f\u0131n\u0131 kontrol edebilirsiniz. Genellikle, web i\u00e7in 2-5 MB resim boyutu makul kabul edilir, ancak forumunuzun ihtiya\u00e7lar\u0131na g\u00f6re bu de\u011feri ayarlayabilirsiniz.<\/p>\n<pre><code class=\"language-python\">\nfrom fastapi import FastAPI, UploadFile, File, HTTPException\nfrom fastapi.responses import JSONResponse\nfrom fastapi.staticfiles import StaticFiles\nimport shutil\nimport os\nimport uuid\nfrom PIL import Image # Pillow k\u00fct\u00fcphanesi\nimport io\n\napp = FastAPI()\n\nUPLOAD_DIRECTORY = \"uploaded_images\"\nMAX_FILE_SIZE = 5 * 1024 * 1024 # 5 MB\n\nif not os.path.exists(UPLOAD_DIRECTORY):\n os.makedirs(UPLOAD_DIRECTORY)\n\napp.mount(\"\/static\", StaticFiles(directory=UPLOAD_DIRECTORY), name=\"static\")\n\n@app.post(\"\/upload-image-secure\/\")\nasync def upload_image_secure(file: UploadFile = File(...)):\n if not file.content_type.startswith(\"image\/\"):\n raise HTTPException(status_code=400, detail=\"Sadece resim dosyalar\u0131 y\u00fcklenebilir.\")\n\n # Dosya boyutu kontrol\u00fc\n file.file.seek(0, os.SEEK_END) # Dosya i\u015faret\u00e7isini sona ta\u015f\u0131\n file_size = file.file.tell() # Boyutu al\n file.file.seek(0) # Dosya i\u015faret\u00e7isini ba\u015fa geri ta\u015f\u0131\n\n if file_size > MAX_FILE_SIZE:\n raise HTTPException(status_code=400, detail=f\"Dosya boyutu {MAX_FILE_SIZE \/ (1024 * 1024):.0f}MB'\u0131 a\u015famaz.\")\n\n # Ger\u00e7ek resim do\u011frulama (Pillow ile)\n try:\n image_data = await file.read() # Dosya i\u00e7eri\u011fini oku\n Image.open(io.BytesIO(image_data))\n file.file.seek(0) # Dosya i\u015faret\u00e7isini ba\u015fa geri ta\u015f\u0131, shutil.copyfileobj kullanaca\u011f\u0131m\u0131z i\u00e7in\n\n except Exception:\n raise HTTPException(status_code=400, detail=\"Ge\u00e7ersiz veya bozuk resim dosyas\u0131.\")\n\n\n file_extension = os.path.splitext(file.filename)[1].lower() # Uzant\u0131y\u0131 k\u00fc\u00e7\u00fck harfe \u00e7evir\n allowed_extensions = [\".jpg\", \".jpeg\", \".png\", \".gif\", \".webp\"]\n\n if file_extension not in allowed_extensions:\n raise HTTPException(status_code=400, detail=\"Desteklenmeyen resim format\u0131. Sadece JPG, JPEG, PNG, GIF, WEBP formatlar\u0131 desteklenir.\")\n\n unique_filename = f\"{uuid.uuid4()}{file_extension}\"\n file_path = os.path.join(UPLOAD_DIRECTORY, unique_filename)\n\n try:\n with open(file_path, \"wb\") as buffer:\n # Buraya kadar dosya zaten okundu ve Image.open ile kontrol edildi,\n # o y\u00fczden await file.read() yerine do\u011frudan image_data'y\u0131 yazabiliriz\n buffer.write(image_data)\n \n image_url = f\"\/static\/{unique_filename}\"\n return JSONResponse(status_code=200, content={\"message\": \"Resim ba\u015far\u0131yla y\u00fcklendi\", \"filename\": unique_filename, \"url\": image_url})\n except Exception as e:\n raise HTTPException(status_code=500, detail=f\"Resim y\u00fcklenirken bir hata olu\u015ftu: {str(e)}\")\n finally:\n # UploadFile nesnesinin underlying file descriptor'\u0131n\u0131 kapatmak \u00f6nemli\n # \u00c7\u00fcnk\u00fc image_data'y\u0131 almak i\u00e7in read() kullan\u0131ld\u0131, art\u0131k dosya nesnesine ihtiya\u00e7 kalmad\u0131.\n # E\u011fer shutil.copyfileobj kullan\u0131lsayd\u0131 file.file.close() gerekli olurdu.\n # Burada image_data'y\u0131 kulland\u0131\u011f\u0131m\u0131z i\u00e7in file.file nesnesi zaten t\u00fcketilmi\u015f olabilir.\n # Yine de iyi uygulama olarak kapatma \u00e7a\u011fr\u0131s\u0131 bulundurmakta fayda var.\n await file.close()\n <\/pre>\n<p><\/code><\/p>\n<p>\u00dc\u00e7\u00fcnc\u00fc olarak, y\u00fcklenen dosyalar\u0131n sunucu taraf\u0131nda \u00e7al\u0131\u015ft\u0131r\u0131labilir olmamas\u0131n\u0131 sa\u011flamak \u00f6nemlidir. Statik dosya sunumu yapan web sunucular\u0131n\u0131n (Nginx, Apache) yap\u0131land\u0131rmas\u0131nda, <code>uploaded_images<\/code> gibi dizinler i\u00e7in <code>Execute<\/code> izinlerinin devre d\u0131\u015f\u0131 b\u0131rak\u0131ld\u0131\u011f\u0131ndan emin olunmal\u0131d\u0131r. Ayr\u0131ca, y\u00fcklenen dosya adlar\u0131n\u0131 rastgele ve benzersiz hale getirmek (UUID kullanarak), yol ge\u00e7i\u015fi (path traversal) sald\u0131r\u0131lar\u0131n\u0131 engellemeye yard\u0131mc\u0131 olur. Son olarak, resimlerin meta verilerini (EXIF verileri) temizlemek, hassas bilgilerin (konum, kamera modeli vb.) a\u00e7\u0131\u011fa \u00e7\u0131kmas\u0131n\u0131 \u00f6nleyebilir. Pillow k\u00fct\u00fcphanesi bu t\u00fcr i\u015flemler i\u00e7in de kullan\u0131labilir.<\/p>\n<div class=\"expert-tip\">\n Uzman \u0130pucu: Resimleri y\u00fcklemeden \u00f6nce boyutland\u0131rmak veya s\u0131k\u0131\u015ft\u0131rmak, hem depolama alan\u0131ndan tasarruf sa\u011flar hem de web sitesi performans\u0131n\u0131 art\u0131r\u0131r. Pillow gibi k\u00fct\u00fcphaneler, bu i\u015flemleri sunucu taraf\u0131nda otomatik olarak yapman\u0131z\u0131 sa\u011flar.\n <\/div>\n<h2>Performans ve \u00d6l\u00e7eklenebilirlik: B\u00fcy\u00fck Forumlar i\u00e7in \u00c7\u00f6z\u00fcmler Nelerdir?<\/h2>\n<p>Forumunuz b\u00fcy\u00fcd\u00fck\u00e7e ve kullan\u0131c\u0131 say\u0131s\u0131 artt\u0131k\u00e7a, resim y\u00fckleme ve sunma performans\u0131 kritik hale gelir. On binlerce veya milyonlarca resimle ba\u015fa \u00e7\u0131kmak, basit bir yerel dosya sistemi kurulumundan daha geli\u015fmi\u015f \u00e7\u00f6z\u00fcmler gerektirir. \u00d6l\u00e7eklenebilirlik, uygulaman\u0131z\u0131n artan y\u00fcke ra\u011fmen h\u0131zl\u0131 ve g\u00fcvenilir kalmas\u0131n\u0131 sa\u011flamakt\u0131r. FastAPI, asenkron yap\u0131s\u0131yla performans avantajlar\u0131 sunsa da, dosya depolama ve da\u011f\u0131t\u0131m stratejileri de bu denklemin \u00f6nemli bir par\u00e7as\u0131d\u0131r.<\/p>\n<p>B\u00fcy\u00fck forumlar i\u00e7in en pop\u00fcler ve etkili \u00e7\u00f6z\u00fcmlerden biri, <strong>bulut tabanl\u0131 nesne depolama (Object Storage)<\/strong> hizmetlerini kullanmakt\u0131r. Amazon S3 (Simple Storage Service), Google Cloud Storage ve Azure Blob Storage bu alandaki \u00f6nde gelen sa\u011flay\u0131c\u0131lard\u0131r. Bu hizmetler, neredeyse s\u0131n\u0131rs\u0131z depolama alan\u0131, y\u00fcksek dayan\u0131kl\u0131l\u0131k, yedeklilik ve y\u00fcksek eri\u015filebilirlik sunar. Resimleri do\u011frudan bu hizmetlere y\u00fcklemek, sunucunuzun disk alan\u0131n\u0131 bo\u015falt\u0131r ve uygulaman\u0131z\u0131n yatay \u00f6l\u00e7eklenebilirli\u011fini art\u0131r\u0131r. \u00d6rne\u011fin, sunucular\u0131n\u0131z aras\u0131nda resim senkronizasyonu konusunda endi\u015felenmenize gerek kalmaz, \u00e7\u00fcnk\u00fc t\u00fcm resimler merkezi bir bulut depolama alan\u0131nda bulunur. FastAPI uygulaman\u0131z, <code>boto3<\/code> (AWS i\u00e7in), <code>google-cloud-storage<\/code> (Google Cloud i\u00e7in) gibi Python SDK'lar\u0131n\u0131 kullanarak bu hizmetlerle kolayca etkile\u015fim kurabilir.<\/p>\n<p>Nesne depolama kullan\u0131rken, FastAPI backend'iniz resmi do\u011frudan istemciden al\u0131p bulut depolama hizmetine aktarabilir. Alternatif olarak, istemciye do\u011frudan bulut depolama hizmetine y\u00fckleme yapmas\u0131 i\u00e7in \u00f6nceden imzalanm\u0131\u015f bir URL (pre-signed URL) verilebilir. Bu y\u00f6ntem, sunucunuzun ara katman olarak dosyay\u0131 i\u015fleme y\u00fck\u00fcn\u00fc azaltarak performans\u0131 daha da art\u0131r\u0131r. \u00d6zellikle b\u00fcy\u00fck boyutlu dosyalar i\u00e7in bu yakla\u015f\u0131m olduk\u00e7a etkilidir. Kullan\u0131c\u0131 resmini do\u011frudan S3'e y\u00fckler, S3 y\u00fckleme tamamland\u0131ktan sonra bir bildirim g\u00f6nderir ve FastAPI backend'iniz bu bildirimi i\u015fleyerek veritaban\u0131na resmin URL'sini kaydeder.<\/p>\n<p>Performans\u0131 daha da art\u0131rmak i\u00e7in, <strong>\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011flar\u0131 (CDN)<\/strong> kullanmak vazge\u00e7ilmezdir. Bir CDN, resimleriniz, CSS ve JavaScript dosyalar\u0131 gibi statik i\u00e7erikleri d\u00fcnya genelindeki sunucularda \u00f6nbelle\u011fe al\u0131r. Bir kullan\u0131c\u0131 forumunuzdaki bir resmi g\u00f6r\u00fcnt\u00fclemek istedi\u011finde, resim ona en yak\u0131n CDN sunucusundan servis edilir. Bu, hem y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r hem de ana sunucunuzun bant geni\u015fli\u011fi ve i\u015flemci y\u00fck\u00fcn\u00fc azalt\u0131r. Amazon CloudFront, Cloudflare, Akamai gibi CDN sa\u011flay\u0131c\u0131lar\u0131, bulut depolama hizmetleriyle sorunsuz bir \u015fekilde entegre olabilir. CDN kullan\u0131m\u0131, forumunuzun k\u00fcresel \u00e7apta h\u0131zl\u0131 ve duyarl\u0131 olmas\u0131n\u0131 sa\u011flar, bu da kullan\u0131c\u0131 deneyimi i\u00e7in b\u00fcy\u00fck bir art\u0131d\u0131r.<\/p>\n<p>Son olarak, resim optimizasyonunu g\u00f6z ard\u0131 etmemek gerekir. Kullan\u0131c\u0131lar taraf\u0131ndan y\u00fcklenen resimlerin otomatik olarak uygun formatlara d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesi (\u00f6rne\u011fin WebP), s\u0131k\u0131\u015ft\u0131r\u0131lmas\u0131 ve farkl\u0131 ekran boyutlar\u0131 i\u00e7in birden fazla \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte olu\u015fturulmas\u0131 (responsive images), performans\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu i\u015flemler, y\u00fckleme s\u0131ras\u0131nda sunucu taraf\u0131nda (Pillow ile) veya bulut depolama hizmetlerinin g\u00f6r\u00fcnt\u00fc i\u015fleme \u00f6zellikleriyle (\u00f6rne\u011fin AWS Lambda ile S3 tetikleyicileri) yap\u0131labilir. Bu \u015fekilde, her kullan\u0131c\u0131n\u0131n cihaz\u0131na en uygun ve en h\u0131zl\u0131 resim teslimat\u0131 sa\u011flan\u0131r. B\u00f6ylece, forumunuzun hem h\u0131zl\u0131 hem de \u00f6l\u00e7eklenebilir kalmas\u0131 sa\u011flan\u0131r.<\/p>\n<h2>Mobil Uyumluluk ve Kullan\u0131c\u0131 Deneyimi: Duyarl\u0131 Tasar\u0131m \u0130pu\u00e7lar\u0131<\/h2>\n<p>G\u00fcn\u00fcm\u00fczde internet kullan\u0131c\u0131lar\u0131n\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011fu mobil cihazlar \u00fczerinden web sitelerine eri\u015fmektedir. Bu nedenle, forumunuzun resim y\u00fckleme \u00f6zelli\u011finin mobil cihazlarda da sorunsuz ve kullan\u0131c\u0131 dostu olmas\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Duyarl\u0131 tasar\u0131m (Responsive Design), farkl\u0131 ekran boyutlar\u0131na ve cihazlara otomatik olarak uyum sa\u011flayan web siteleri olu\u015fturman\u0131n temelidir. \u0130yi bir kullan\u0131c\u0131 deneyimi (UX), sadece i\u015flevsellik de\u011fil, ayn\u0131 zamanda kullan\u0131m kolayl\u0131\u011f\u0131 ve g\u00f6rsel \u00e7ekicilik de demektir.<\/p>\n<p>\u0130lk olarak, <strong>HTML ve CSS<\/strong> kullanarak duyarl\u0131 formlar ve resim \u00f6nizlemeleri olu\u015fturmak esast\u0131r. <code>meta viewport<\/code> etiketini HTML ba\u015fl\u0131\u011f\u0131na eklemek, taray\u0131c\u0131n\u0131n sayfan\u0131n geni\u015fli\u011fini cihaz\u0131n geni\u015fli\u011fine ayarlamas\u0131n\u0131 ve ilk \u00f6l\u00e7eklemeyi 1.0 olarak ayarlamas\u0131n\u0131 sa\u011flar. Bu, mobil cihazlarda sayfan\u0131n do\u011fru \u015fekilde g\u00f6r\u00fcnt\u00fclenmesi i\u00e7in olmazsa olmazd\u0131r. Input alanlar\u0131 ve butonlar gibi form elemanlar\u0131, k\u00fc\u00e7\u00fck ekranlarda daralmamal\u0131 veya ta\u015fmamal\u0131d\u0131r. <code>max-width: 100%<\/code> ve <code>height: auto<\/code> gibi CSS kurallar\u0131, y\u00fcklenen resim \u00f6nizlemelerinin konteynerlerine s\u0131\u011fmas\u0131n\u0131 ve bozulmamas\u0131n\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-css\">\n\/* \u00d6rnek Mobil Uyumluluk CSS Kurallar\u0131 *\/\n.container {\n padding: 20px;\n margin: 20px auto; \/* K\u00fc\u00e7\u00fck ekranlarda kenar bo\u015fluklar\u0131n\u0131 azalt *\/\n}\n\ninput[type=\"file\"], button {\n width: 100%; \/* Mobil cihazlarda input ve butonlar\u0131n tam geni\u015flikte olmas\u0131n\u0131 sa\u011fla *\/\n box-sizing: border-box; \/* Padding ve border'\u0131n geni\u015fli\u011fe dahil olmas\u0131n\u0131 sa\u011fla *\/\n}\n\n#uploadedImagePreview {\n max-width: 100%; \/* Resimlerin kapsay\u0131c\u0131ya s\u0131\u011fmas\u0131n\u0131 sa\u011fla *\/\n height: auto; \/* Oranlar\u0131 koru *\/\n}\n\n@media (max-width: 600px) {\n body {\n font-size: 14px; \/* K\u00fc\u00e7\u00fck ekranlarda yaz\u0131 boyutunu k\u00fc\u00e7\u00fclt *\/\n }\n h1 {\n font-size: 22px; \/* Ba\u015fl\u0131k boyutunu ayarla *\/\n }\n .container {\n padding: 15px; \/* Daha az padding *\/\n margin: 10px; \/* Daha k\u00fc\u00e7\u00fck d\u0131\u015f bo\u015fluk *\/\n }\n}\n <\/pre>\n<p><\/code><\/p>\n<p>\u0130kinci olarak, <strong>kullan\u0131c\u0131 geri bildirimi ve ilerleme g\u00f6stergeleri<\/strong> mobil cihazlarda daha da kritik hale gelir. Mobil ba\u011flant\u0131lar genellikle daha yava\u015f olabilir, bu nedenle bir resmin y\u00fcklendi\u011fini g\u00f6steren bir spinner veya ilerleme \u00e7ubu\u011fu, kullan\u0131c\u0131n\u0131n sab\u0131rla beklemesini sa\u011flar ve uygulaman\u0131n donmad\u0131\u011f\u0131 hissini verir. JavaScript ile Fetch API'nin <code>onprogress<\/code> olay\u0131 gibi \u00f6zellikler veya basit bir CSS tabanl\u0131 spinner, bu t\u00fcr geri bildirimleri sa\u011flamak i\u00e7in kullan\u0131labilir. Ayr\u0131ca, dosya boyutu limitleri veya desteklenmeyen dosya t\u00fcrleri gibi hatalar\u0131 anla\u015f\u0131l\u0131r ve an\u0131nda bir \u015fekilde kullan\u0131c\u0131ya iletmek, hayal k\u0131r\u0131kl\u0131\u011f\u0131n\u0131 \u00f6nler.<\/p>\n<p>\u00dc\u00e7\u00fcnc\u00fc olarak, mobil cihazlar i\u00e7in \u00f6zel resim boyutland\u0131rma ve s\u0131k\u0131\u015ft\u0131rma stratejileri benimsemek, hem veri kullan\u0131m\u0131n\u0131 azalt\u0131r hem de y\u00fckleme s\u00fcrelerini iyile\u015ftirir. Backend taraf\u0131nda resimleri i\u015flerken, mobil cihazlar i\u00e7in optimize edilmi\u015f (daha d\u00fc\u015f\u00fck \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ve daha s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f) versiyonlar\u0131n\u0131 olu\u015fturup sunmak, kullan\u0131c\u0131lara daha h\u0131zl\u0131 bir deneyim sunar. <code><picture><\/code> etiketi veya <code>srcset<\/code> \u00f6zelli\u011fi ile farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerdeki resimleri tan\u0131mlayarak taray\u0131c\u0131n\u0131n en uygun olan\u0131 se\u00e7mesini sa\u011flayabilirsiniz. Ayr\u0131ca, tembel y\u00fckleme (lazy loading) teknikleri kullanarak, sayfa ba\u015flang\u0131c\u0131nda sadece g\u00f6r\u00fcnen resimlerin y\u00fcklenmesini sa\u011flamak da genel performans\u0131 art\u0131r\u0131r.<\/p>\n<p>Son olarak, dokunmatik dostu aray\u00fczler tasarlamak da \u00f6nemlidir. B\u00fcy\u00fck butonlar, yeterli bo\u015fluklar ve kolayca t\u0131klanabilir alanlar, mobil kullan\u0131c\u0131lar\u0131n rahat\u00e7a etkile\u015fim kurmas\u0131n\u0131 sa\u011flar. Resim se\u00e7imi i\u00e7in standart mobil sistem aray\u00fcz\u00fcn\u00fc kullanmak (\u00f6rne\u011fin galeriden se\u00e7im veya kamera ile \u00e7ekim) kullan\u0131c\u0131lar\u0131n zaten a\u015fina oldu\u011fu bir deneyim sunar. T\u00fcm bu detaylara dikkat ederek, FastAPI ile olu\u015fturdu\u011funuz forumunuzdaki resim y\u00fckleme \u00f6zelli\u011fi, t\u00fcm cihazlarda kusursuz bir kullan\u0131c\u0131 deneyimi sunacakt\u0131r.<\/p>\n<h2>Sonu\u00e7: FastAPI ile G\u00fc\u00e7l\u00fc Resim Y\u00fckleme<\/h2>\n<p>FastAPI ile forumunuzda resim y\u00fckleme \u00f6zelli\u011fini ba\u015far\u0131yla entegre etmek, kullan\u0131c\u0131 etkile\u015fimini ve i\u00e7eri\u011fin zenginli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r. Bu makale boyunca, FastAPI'nin <code>UploadFile<\/code> ve <code>File<\/code> ba\u011f\u0131ml\u0131l\u0131k enjeksiyonlar\u0131 sayesinde backend'de nas\u0131l g\u00fc\u00e7l\u00fc ve esnek bir API olu\u015fturulaca\u011f\u0131n\u0131, frontend'de Fetch API ile nas\u0131l entegrasyon yap\u0131laca\u011f\u0131n\u0131 ve en \u00f6nemlisi, g\u00fcvenlik, validasyon, performans ve mobil uyumluluk gibi kritik konular\u0131 nas\u0131l ele alaca\u011f\u0131m\u0131z\u0131 detayl\u0131 bir \u015fekilde inceledik. Modern web uygulamalar\u0131 i\u00e7in vazge\u00e7ilmez olan bu \u00f6zellik, do\u011fru uyguland\u0131\u011f\u0131nda forumunuzu daha dinamik, \u00e7ekici ve kullan\u0131labilir hale getirir.<\/p>\n<p>Yerel dosya sisteminden bulut tabanl\u0131 depolama \u00e7\u00f6z\u00fcmlerine ge\u00e7i\u015f, CDN kullan\u0131m\u0131 ile h\u0131zland\u0131rma, s\u0131k\u0131 g\u00fcvenlik kontrolleri ve duyarl\u0131 tasar\u0131m prensipleri, uygulaman\u0131z\u0131n gelecekteki b\u00fcy\u00fcmesine haz\u0131r olmas\u0131n\u0131 sa\u011flar. Unutmay\u0131n ki, her teknik \u00f6zelli\u011fin ard\u0131nda bir kullan\u0131c\u0131 deneyimi ve bir i\u015f gereksinimi yatar. Bu rehberde \u00f6\u011frendi\u011finiz bilgilerle, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n forumunuzda daha fazla vakit ge\u00e7irmesini ve de\u011ferli i\u00e7erikler \u00fcretmesini te\u015fvik edeceksiniz. FastAPI'nin sundu\u011fu kolayl\u0131klar ve Python ekosisteminin geni\u015f imkanlar\u0131 sayesinde, bu ad\u0131mlar\u0131 atarak \u00e7ok daha sa\u011flam ve etkileyici bir forum uygulamas\u0131 in\u015fa edebilirsiniz. \u015eimdi s\u0131ra sizde; \u00f6\u011frendiklerinizi uygulay\u0131n ve forumunuzu bir sonraki seviyeye ta\u015f\u0131y\u0131n!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<ul>\n<li>\n <strong>S: Y\u00fcklenen resimleri veritaban\u0131nda m\u0131 yoksa dosya sisteminde mi saklamal\u0131y\u0131m?<\/strong><\/p>\n<p><strong>C:<\/strong> Genellikle resimlerin kendisi dosya sisteminde veya bulut depolama hizmetlerinde (S3 gibi) saklan\u0131r. Veritaban\u0131nda ise sadece resmin yolu (URL), boyutu, y\u00fcklenme tarihi ve kimin y\u00fckledi\u011fi gibi meta veriler tutulur. Do\u011frudan veritaban\u0131nda saklamak (BLOB olarak), veritaban\u0131n\u0131n performans\u0131n\u0131 olumsuz etkileyebilir ve y\u00f6netimi zorla\u015ft\u0131rabilir.<\/p>\n<\/li>\n<li>\n <strong>S: FastAPI resimleri otomatik olarak s\u0131k\u0131\u015ft\u0131r\u0131r m\u0131 veya boyutland\u0131r\u0131r m\u0131?<\/strong><\/p>\n<p><strong>C:<\/strong> Hay\u0131r, FastAPI sadece dosya y\u00fckleme mekanizmas\u0131n\u0131 sa\u011flar. Resimleri s\u0131k\u0131\u015ft\u0131rmak veya boyutland\u0131rmak i\u00e7in Pillow (PIL Fork) gibi \u00fc\u00e7\u00fcnc\u00fc taraf Python k\u00fct\u00fcphanelerini kullanman\u0131z gerekir. Bu i\u015flemler genellikle sunucu taraf\u0131nda, dosya diske kaydedilmeden \u00f6nce veya kaydedildikten hemen sonra yap\u0131l\u0131r.<\/p>\n<\/li>\n<li>\n <strong>S: Y\u00fcklenen resimleri nas\u0131l g\u00fcvenli hale getirebilirim?<\/strong><\/p>\n<p><strong>C:<\/strong> G\u00fcvenli\u011fi sa\u011flamak i\u00e7in dosya tipi (MIME type ve magic number) do\u011frulamas\u0131, dosya boyutu s\u0131n\u0131r\u0131, k\u00f6t\u00fc ama\u00e7l\u0131 dosya i\u00e7erik kontrol\u00fc (\u00f6rne\u011fin vir\u00fcs taramas\u0131), resimlerin statik bir dizinde \u00e7al\u0131\u015ft\u0131r\u0131labilir yetkileri olmadan saklanmas\u0131 ve benzersiz dosya adlar\u0131 kullan\u0131lmas\u0131 \u00f6nemlidir. Ayr\u0131ca, kullan\u0131c\u0131lar\u0131n sadece kendi y\u00fckledikleri resimleri silebilmesi veya d\u00fczenleyebilmesi gibi yetkilendirme kontrolleri de uygulanmal\u0131d\u0131r.<\/p>\n<\/li>\n<li>\n <strong>S: Mobil cihazlar i\u00e7in \u00f6zel bir i\u015flem yapmam gerekiyor mu?<\/strong><\/p>\n<p><strong>C:<\/strong> Evet, mobil uyumluluk i\u00e7in duyarl\u0131 tasar\u0131m (CSS media queries), performans\u0131 art\u0131rmak amac\u0131yla resimlerin farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerde sunulmas\u0131 (srcset veya <picture> etiketi), tembel y\u00fckleme (lazy loading) ve kullan\u0131c\u0131ya y\u00fckleme s\u0131ras\u0131nda geri bildirim sa\u011flayan aray\u00fczler tasarlamak \u00f6nemlidir.<\/p>\n<\/li>\n<li>\n <strong>S: CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) kullanmak neden \u00f6nemli?<\/strong><\/p>\n<p><strong>C:<\/strong> CDN, statik i\u00e7eriklerinizi (resimler, CSS, JS) d\u00fcnya genelindeki sunucularda \u00f6nbelle\u011fe alarak kullan\u0131c\u0131lara co\u011frafi olarak en yak\u0131n noktadan sunulmas\u0131n\u0131 sa\u011flar. Bu durum, hem sayfa y\u00fckleme s\u00fcrelerini dramatik \u015fekilde k\u0131salt\u0131r hem de ana sunucunuzun y\u00fck\u00fcn\u00fc azaltarak daha iyi bir performans ve \u00f6l\u00e7eklenebilirlik sa\u011flar.<\/p>\n<\/li>\n<\/ul>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-33396","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9<\/title>\n<meta name=\"description\" content=\"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu ad\u0131m ad\u0131m rehberde, g\u00fcvenli ve performansl\u0131 bir \u015fekilde resimlerin nas\u0131l y\u00fcklenece\u011fini ve y\u00f6netilece\u011fini ke\u015ffedeceksiniz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9\" \/>\n<meta property=\"og:description\" content=\"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu ad\u0131m ad\u0131m rehberde, g\u00fcvenli ve performansl\u0131 bir \u015fekilde resimlerin nas\u0131l y\u00fcklenece\u011fini ve y\u00f6netilece\u011fini ke\u015ffedeceksiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-02T07:01:58+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9\",\"datePublished\":\"2025-11-02T07:01:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\"},\"wordCount\":3973,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\",\"name\":\"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-02T07:01:58+00:00\",\"description\":\"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu ad\u0131m ad\u0131m rehberde, g\u00fcvenli ve performansl\u0131 bir \u015fekilde resimlerin nas\u0131l y\u00fcklenece\u011fini ve y\u00f6netilece\u011fini ke\u015ffedeceksiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9","description":"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu ad\u0131m ad\u0131m rehberde, g\u00fcvenli ve performansl\u0131 bir \u015fekilde resimlerin nas\u0131l y\u00fcklenece\u011fini ve y\u00f6netilece\u011fini ke\u015ffedeceksiniz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/","og_locale":"tr_TR","og_type":"article","og_title":"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9","og_description":"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu ad\u0131m ad\u0131m rehberde, g\u00fcvenli ve performansl\u0131 bir \u015fekilde resimlerin nas\u0131l y\u00fcklenece\u011fini ve y\u00f6netilece\u011fini ke\u015ffedeceksiniz.","og_url":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-02T07:01:58+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"24 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9","datePublished":"2025-11-02T07:01:58+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/"},"wordCount":3973,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/","url":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/","name":"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-02T07:01:58+00:00","description":"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu ad\u0131m ad\u0131m rehberde, g\u00fcvenli ve performansl\u0131 bir \u015fekilde resimlerin nas\u0131l y\u00fcklenece\u011fini ve y\u00f6netilece\u011fini ke\u015ffedeceksiniz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33396"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33396\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

FastAPI ile dosya y\u00fcklemek, olduk\u00e7a sezgisel ve basittir, zira framework bu t\u00fcr i\u015flemler i\u00e7in \u00f6zel ba\u011f\u0131ml\u0131l\u0131k enjeksiyonlar\u0131 ve tiplendirme (type hinting) mekanizmalar\u0131 sunar. Temelde, y\u00fcklenen bir dosyay\u0131 sunucu taraf\u0131nda i\u015flemek i\u00e7in

UploadFile<\/code> ve File<\/code> s\u0131n\u0131flar\u0131n\u0131 kullan\u0131r\u0131z. UploadFile<\/code>, y\u00fcklenen dosya hakk\u0131nda meta veriler (dosya ad\u0131, i\u00e7erik tipi vb.) ve bir dosya benzeri nesne sa\u011flar, bu da dosya i\u00e7eri\u011fini okumam\u0131z\u0131 veya do\u011frudan kaydetmemizi m\u00fcmk\u00fcn k\u0131lar. File<\/code> ise, UploadFile<\/code>‘\u0131n daha basit bir kullan\u0131m\u0131n\u0131 sunar, \u00f6zellikle k\u00fc\u00e7\u00fck boyutlu ve sadece bellek i\u00e7i i\u015flem gerektiren dosyalar i\u00e7in daha uygundur. Ancak \u00e7o\u011fu resim y\u00fckleme senaryosu i\u00e7in UploadFile<\/code> tercih edilir \u00e7\u00fcnk\u00fc dosya boyutu potansiyel olarak b\u00fcy\u00fck olabilir ve diske kaydedilmesi gerekebilir.<\/p>\n

Bir dosya y\u00fckleme i\u015flemi ba\u015flad\u0131\u011f\u0131nda, istemci (taray\u0131c\u0131 veya mobil uygulama) dosyay\u0131 bir HTTP POST iste\u011fi ile sunucuya g\u00f6nderir. Bu istek genellikle multipart\/form-data<\/code> i\u00e7erik tipini kullan\u0131r. FastAPI, gelen iste\u011fi otomatik olarak ayr\u0131\u015ft\u0131r\u0131r ve belirtilen UploadFile<\/code> veya File<\/code> parametrelerine do\u011fru nesneleri enjekte eder. Bu sayede, geli\u015ftiricinin manuel olarak istek g\u00f6vdesini ayr\u0131\u015ft\u0131rmak gibi zaman al\u0131c\u0131 ve hataya a\u00e7\u0131k i\u015flemleri yapmas\u0131na gerek kalmaz. Sadece fonksiyon parametrelerine do\u011fru tipleri eklemek yeterlidir. \u00d6rne\u011fin, bir resim y\u00fcklemek istedi\u011finizde, endpoint’inizin bir parametresini file: UploadFile<\/code> olarak tan\u0131mlaman\u0131z yeterlidir. FastAPI, bu sayede gelen dosya verilerini otomatik olarak i\u015fler ve size kullan\u0131ma haz\u0131r bir UploadFile<\/code> nesnesi sunar. Bu nesne, filename<\/code>, content_type<\/code>, size<\/code> gibi \u00f6zelliklerin yan\u0131 s\u0131ra, read()<\/code>, write()<\/code>, seek()<\/code> gibi standart dosya operasyonlar\u0131n\u0131 ger\u00e7ekle\u015ftiren metodlara da sahiptir.<\/p>\n

Dosya depolama konusunda birka\u00e7 farkl\u0131 yakla\u015f\u0131m mevcuttur. K\u00fc\u00e7\u00fck \u00f6l\u00e7ekli uygulamalar veya geli\u015ftirme ortamlar\u0131 i\u00e7in, resimleri sunucunun yerel dosya sistemine kaydetmek pratik olabilir. Ancak daha b\u00fcy\u00fck, \u00f6l\u00e7eklenebilir ve g\u00fcvenli bir forum i\u00e7in bulut tabanl\u0131 depolama \u00e7\u00f6z\u00fcmleri (\u00f6rne\u011fin Amazon S3, Google Cloud Storage, Azure Blob Storage) \u015fiddetle \u00f6nerilir. Bu \u00e7\u00f6z\u00fcmler, y\u00fcksek eri\u015filebilirlik, yedeklilik, performans ve maliyet etkinli\u011fi sunar. Ayr\u0131ca, statik dosya sunumu (CSS, JS, resimler) i\u00e7in genellikle bir CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) kullan\u0131l\u0131r. CDN’ler, kullan\u0131c\u0131ya en yak\u0131n sunucudan i\u00e7erik da\u011f\u0131tarak y\u00fckleme s\u00fcrelerini k\u0131salt\u0131r ve sunucunuzun y\u00fck\u00fcn\u00fc azalt\u0131r. FastAPI, bu t\u00fcr entegrasyonlar i\u00e7in do\u011frudan bir \u00f6zellik sunmasa da, Python’\u0131n zengin k\u00fct\u00fcphane ekosistemi sayesinde bu hizmetlerle kolayca etkile\u015fim kurabilirsiniz. Yerel dosya sistemine kaydetme i\u015flemini anlamak, bulut depolamaya ge\u00e7i\u015fin ilk ad\u0131m\u0131 olacakt\u0131r, \u00e7\u00fcnk\u00fc temel dosya yazma mant\u0131\u011f\u0131 her iki durumda da benzerdir.<\/p>\n

\n        Uzman \u0130pucu: B\u00fcy\u00fck dosyalar\u0131 do\u011frudan bellek \u00fczerinde i\u015flememeye \u00f6zen g\u00f6sterin. UploadFile.file<\/code> nesnesini kullanarak dosyay\u0131 bir d\u00f6ng\u00fcde okuyup par\u00e7a par\u00e7a i\u015flemek veya do\u011frudan diske yazmak, bellek ta\u015fmalar\u0131n\u0131 \u00f6nleyecektir.\n    <\/div>\nBackend’i Haz\u0131rlamak: FastAPI ile Resim Y\u00fckleme API’si Nas\u0131l Olu\u015fturulur?<\/h2>\n\u015eimdi FastAPI backend’imizde resim y\u00fckleme endpoint’ini nas\u0131l olu\u015fturaca\u011f\u0131m\u0131za odaklanal\u0131m. Bu k\u0131s\u0131m, forumumuzun resim y\u00fckleme yetene\u011finin kalbini olu\u015fturacak. \u0130lk olarak, gerekli k\u00fct\u00fcphaneleri i\u00e7e aktararak ba\u015flayal\u0131m ve basit bir FastAPI uygulamas\u0131 olu\u015ftural\u0131m. Resimleri saklayaca\u011f\u0131m\u0131z bir dizin (klas\u00f6r) tan\u0131mlamak da \u00f6nemlidir. Bu dizin, uygulaman\u0131z\u0131n k\u00f6k dizininde veya bir yap\u0131land\u0131rma dosyas\u0131 \u00fczerinden belirlenebilir. G\u00fcvenlik nedeniyle, y\u00fcklenen resimlerin do\u011frudan web sunucusu taraf\u0131ndan eri\u015filebilen ancak uygulama kodunuzun i\u00e7inden d\u00fczenlenemeyen bir alana kaydedilmesi tercih edilir.<\/p>\n
A\u015fa\u011f\u0131daki kod blo\u011fu, bir upload_image<\/code> endpoint’i tan\u0131ml\u0131yor. Bu endpoint, POST<\/code> metodunu kullanarak bir resim dosyas\u0131 al\u0131r. UploadFile<\/code> tipini kullanarak, FastAPI otomatik olarak gelen dosya verilerini i\u015fler ve bize bir dosya nesnesi sunar. Bu nesne \u00fczerinde read()<\/code> metodunu \u00e7a\u011f\u0131rarak dosyan\u0131n i\u00e7eri\u011fini alabilir ve ard\u0131ndan bunu yerel dosya sistemimize kaydedebiliriz. Dosya ad\u0131 olu\u015ftururken, benzersizlik sa\u011flamak i\u00e7in bir UUID (Evrensel Benzersiz Tan\u0131mlay\u0131c\u0131) kullanmak iyi bir uygulamad\u0131r, b\u00f6ylece farkl\u0131 kullan\u0131c\u0131lar\u0131n ayn\u0131 isimde dosya y\u00fcklemesi \u00e7ak\u0131\u015fmalara yol a\u00e7maz.<\/p>\n
\nfrom fastapi import FastAPI, UploadFile, File, HTTPException\nfrom fastapi.responses import JSONResponse\nfrom fastapi.staticfiles import StaticFiles\nimport shutil\nimport os\nimport uuid\n\napp = FastAPI()\n\n# Resimlerin saklanaca\u011f\u0131 dizin\nUPLOAD_DIRECTORY = \"uploaded_images\"\n\n# Dizin yoksa olu\u015ftur\nif not os.path.exists(UPLOAD_DIRECTORY):\n    os.makedirs(UPLOAD_DIRECTORY)\n\n# Statik dosyalar\u0131 sunmak i\u00e7in (\u00f6rne\u011fin, y\u00fcklenen resimler)\napp.mount(\"\/static\", StaticFiles(directory=UPLOAD_DIRECTORY), name=\"static\")\n\n@app.post(\"\/upload-image\/\")\nasync def upload_image(file: UploadFile = File(...)):\n    \"\"\"\n    FastAPI ile bir resim dosyas\u0131n\u0131 y\u00fckler ve sunucuda saklar.\n    \"\"\"\n    if not file.content_type.startswith(\"image\/\"):\n        raise HTTPException(status_code=400, detail=\"Sadece resim dosyalar\u0131 y\u00fcklenebilir.\")\n\n    # Benzersiz dosya ad\u0131 olu\u015fturma\n    file_extension = os.path.splitext(file.filename)[1]\n    unique_filename = f\"{uuid.uuid4()}{file_extension}\"\n    file_path = os.path.join(UPLOAD_DIRECTORY, unique_filename)\n\n    try:\n        # Dosyay\u0131 diske kaydetme\n        with open(file_path, \"wb\") as buffer:\n            shutil.copyfileobj(file.file, buffer)\n        \n        # Y\u00fcklenen resmin URL'sini d\u00f6nd\u00fcr\n        image_url = f\"\/static\/{unique_filename}\"\n        return JSONResponse(status_code=200, content={\"message\": \"Resim ba\u015far\u0131yla y\u00fcklendi\", \"filename\": unique_filename, \"url\": image_url})\n    except Exception as e:\n        raise HTTPException(status_code=500, detail=f\"Resim y\u00fcklenirken bir hata olu\u015ftu: {str(e)}\")\n    finally:\n        # Y\u00fcklenen dosyay\u0131 kapat (\u00f6nemli!)\n        await file.close()\n\n# Uygulamay\u0131 \u00e7al\u0131\u015ft\u0131rmak i\u00e7in (terminalde uvicorn main:app --reload)\n# if __name__ == \"__main__\":\n#     import uvicorn\n#     uvicorn.run(app, host=\"0.0.0.0\", port=8000)\n    <\/pre>\n<\/code><\/p>\n
Yukar\u0131daki kodda \u00f6nemli noktalar \u015funlard\u0131r: UPLOAD_DIRECTORY<\/code> de\u011fi\u015fkeni, resimlerin kaydedilece\u011fi klas\u00f6r\u00fc belirtir. app.mount(\"\/static\", ...)<\/code> sat\u0131r\u0131, bu dizindeki dosyalar\u0131n \/static\/<\/code> URL yolu \u00fczerinden eri\u015filebilir olmas\u0131n\u0131 sa\u011flar. Bu, y\u00fckledi\u011finiz resimlere taray\u0131c\u0131dan eri\u015fmek i\u00e7in gereklidir. upload_image<\/code> fonksiyonu i\u00e7inde, dosyan\u0131n bir resim olup olmad\u0131\u011f\u0131n\u0131 file.content_type<\/code> kontrol ederek do\u011fruluyoruz. Ard\u0131ndan, uuid.uuid4()<\/code> kullanarak benzersiz bir dosya ad\u0131 olu\u015fturuyor ve shutil.copyfileobj<\/code> ile gelen dosya ak\u0131\u015f\u0131n\u0131 diske yaz\u0131yoruz. Bu, b\u00fcy\u00fck dosyalar i\u00e7in belle\u011fi verimli kullanman\u0131n bir yoludur. Son olarak, resmin eri\u015filebilir URL'sini i\u00e7eren bir JSON yan\u0131t\u0131 d\u00f6nd\u00fcr\u00fcyoruz. finally<\/code> blo\u011funda await file.close()<\/code> kullanmak, dosya kayna\u011f\u0131n\u0131 serbest b\u0131rakmak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
\n        Uzman \u0130pucu: Ger\u00e7ek d\u00fcnya uygulamalar\u0131nda, sadece content_type<\/code> kontrol\u00fc yeterli olmayabilir. Daha kapsaml\u0131 g\u00fcvenlik i\u00e7in, y\u00fcklenen resmin ger\u00e7ekten bir resim dosyas\u0131 oldu\u011funu do\u011frulamak amac\u0131yla bir resim i\u015fleme k\u00fct\u00fcphanesi (\u00f6rne\u011fin Pillow) kullanarak dosyan\u0131n ba\u015fl\u0131\u011f\u0131n\u0131 okuyup kontrol edebilirsiniz.\n    <\/div>\nFrontend Entegrasyonu: Resim Y\u00fckleme Formu ve JavaScript Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\nBackend'imizi haz\u0131rlad\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi de kullan\u0131c\u0131lar\u0131n resim y\u00fckleyebilece\u011fi bir aray\u00fcz olu\u015ftural\u0131m. Bu k\u0131s\u0131m genellikle HTML formlar\u0131 ve JavaScript'in Fetch API'si kullan\u0131larak ger\u00e7ekle\u015ftirilir. Forumumuzda, kullan\u0131c\u0131lar\u0131n yeni bir konu olu\u015ftururken veya mevcut bir yoruma resim eklerken bu aray\u00fcz\u00fc kullanmas\u0131n\u0131 isteyece\u011fiz. \u00d6nemli olan, kullan\u0131c\u0131 deneyimini basit ve anla\u015f\u0131l\u0131r tutmakt\u0131r, b\u00f6ylece herkes kolayca resim y\u00fckleyebilir. Mobil cihazlarda da sorunsuz \u00e7al\u0131\u015fmas\u0131 i\u00e7in duyarl\u0131 tasar\u0131m prensiplerini g\u00f6z \u00f6n\u00fcnde bulundurmal\u0131y\u0131z.<\/p>\n
\u0130lk ad\u0131m olarak, kullan\u0131c\u0131n\u0131n bir dosya se\u00e7ebilece\u011fi ve y\u00fckleme i\u015flemini ba\u015flatabilece\u011fi basit bir HTML formu olu\u015ftural\u0131m. Bu form, enctype=\"multipart\/form-data\"<\/code> \u00f6zelli\u011fine sahip olmal\u0131d\u0131r, \u00e7\u00fcnk\u00fc dosya y\u00fckleme i\u015flemleri i\u00e7in bu gereklidir. Ayr\u0131ca, formun bir input type=\"file\"<\/code> elementi ve bir g\u00f6nder d\u00fc\u011fmesi i\u00e7ermesi gerekir. A\u015fa\u011f\u0131daki HTML yap\u0131s\u0131, temel bir resim y\u00fckleme formunu temsil etmektedir. id<\/code> \u00f6zellikleri, JavaScript ile bu elementlere kolayca eri\u015febilmemiz i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
\n\n\n\n    \n    \n    Resim Y\u00fckleme Formu<\/title>\n    <style>\n        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; background-color: #f4f7f6; color: #333; }\n        .container { max-width: 600px; margin: 50px auto; padding: 30px; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }\n        h1 { color: #007bff; text-align: center; margin-bottom: 30px; }\n        form { display: flex; flex-direction: column; gap: 15px; }\n        input[type=\"file\"] { border: 1px solid #ddd; padding: 10px; border-radius: 5px; background-color: #f9f9f9; }\n        button { background-color: #28a745; color: white; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; }\n        button:hover { background-color: #218838; }\n        #message { margin-top: 20px; padding: 10px; border-radius: 5px; font-weight: bold; text-align: center; }\n        #message.success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }\n        #message.error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }\n        #uploadedImagePreview { max-width: 100%; height: auto; margin-top: 20px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: none; }\n\n        \/* Mobil uyumluluk *\/\n        @media (max-width: 768px) {\n            .container { margin: 20px auto; padding: 20px; }\n            h1 { font-size: 24px; }\n            button { width: 100%; }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <h1>Forum Resim Y\u00fckleyici<\/h1>\n        <form id=\"uploadForm\">\n            <label for=\"imageFile\">Y\u00fcklenecek Resmi Se\u00e7in:<\/label>\n            <input type=\"file\" id=\"imageFile\" name=\"imageFile\" accept=\"image\/*\" required>\n            <button type=\"submit\">Resmi Y\u00fckle<\/button>\n        <\/form>\n        <div id=\"message\"><\/div>\n        <img decoding=\"async\" id=\"uploadedImagePreview\" src=\"\" alt=\"Y\u00fcklenen Resim \u00d6nizlemesi\">\n    <\/div>\n\n    <script>\n        document.getElementById('uploadForm').addEventListener('submit', async function(event) {\n            event.preventDefault(); \/\/ Formun varsay\u0131lan submit davran\u0131\u015f\u0131n\u0131 engelle\n\n            const fileInput = document.getElementById('imageFile');\n            const messageDiv = document.getElementById('message');\n            const imagePreview = document.getElementById('uploadedImagePreview');\n            messageDiv.textContent = ''; \/\/ Mesaj\u0131 temizle\n            messageDiv.className = ''; \/\/ Stil s\u0131n\u0131f\u0131n\u0131 temizle\n            imagePreview.style.display = 'none'; \/\/ \u00d6nizlemeyi gizle\n\n            if (fileInput.files.length === 0) {\n                messageDiv.textContent = 'L\u00fctfen bir dosya se\u00e7in.';\n                messageDiv.classList.add('error');\n                return;\n            }\n\n            const file = fileInput.files[0];\n            const formData = new FormData();\n            formData.append('file', file); \/\/ Backend'deki 'file' parametresiyle e\u015fle\u015fmeli\n\n            try {\n                const response = await fetch('\/upload-image\/', { \/\/ FastAPI endpoint URL'si\n                    method: 'POST',\n                    body: formData \/\/ FormData otomatik olarak Content-Type: multipart\/form-data ayarlar\n                });\n\n                const result = await response.json();\n\n                if (response.ok) {\n                    messageDiv.textContent = result.message + ' URL: ' + result.url;\n                    messageDiv.classList.add('success');\n                    imagePreview.src = result.url; \/\/ Y\u00fcklenen resmin URL'sini \u00f6nizlemeye ata\n                    imagePreview.style.display = 'block'; \/\/ \u00d6nizlemeyi g\u00f6ster\n                } else {\n                    messageDiv.textContent = 'Y\u00fckleme hatas\u0131: ' + result.detail;\n                    messageDiv.classList.add('error');\n                }\n            } catch (error) {\n                messageDiv.textContent = 'A\u011f hatas\u0131 veya sunucuya ula\u015f\u0131lam\u0131yor: ' + error.message;\n                messageDiv.classList.add('error');\n            }\n        });\n    <\/script>\n<\/body>\n<\/html>\n    <\/pre>\n<p><\/code><\/p>\n<p>JavaScript taraf\u0131nda, formun g\u00f6nderim olay\u0131n\u0131 (submit event) dinliyoruz. <code>event.preventDefault()<\/code> \u00e7a\u011fr\u0131s\u0131, formun geleneksel sayfa yenileme davran\u0131\u015f\u0131n\u0131 engeller. Daha sonra, se\u00e7ilen dosyay\u0131 almak i\u00e7in <code>document.getElementById('imageFile').files[0]<\/code> kullan\u0131yoruz. Bu dosyay\u0131 bir <code>FormData<\/code> nesnesine ekliyoruz. <code>FormData<\/code> objesi, <code>multipart\/form-data<\/code> format\u0131nda veri g\u00f6ndermenin modern ve kolay bir yoludur. Anahtar nokta, <code>formData.append('file', file)<\/code> sat\u0131r\u0131d\u0131r; burada ilk arg\u00fcman (<code>'file'<\/code>), FastAPI endpoint'indeki <code>file: UploadFile<\/code> parametresinin ad\u0131yla tam olarak e\u015fle\u015fmelidir.<\/p>\n<p>Fetch API'si ile <code>POST<\/code> iste\u011fini yap\u0131yoruz. <code>method: 'POST'<\/code> ve <code>body: formData<\/code> belirtmek yeterlidir; Fetch API otomatik olarak <code>Content-Type<\/code> ba\u015fl\u0131\u011f\u0131n\u0131 <code>multipart\/form-data<\/code> olarak ayarlar. Yan\u0131t\u0131 ald\u0131ktan sonra, ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z duruma g\u00f6re kullan\u0131c\u0131ya geri bildirim sa\u011fl\u0131yoruz. Ba\u015far\u0131l\u0131 y\u00fcklemelerde, sunucudan d\u00f6nen resim URL'sini al\u0131p bir <code><img id=\"uploadedImagePreview\"><\/code> etiketi i\u00e7inde g\u00f6steriyoruz, b\u00f6ylece kullan\u0131c\u0131 y\u00fckledi\u011fi resmi hemen g\u00f6rebilir. CSS i\u00e7inde bulunan <code>@media (max-width: 768px)<\/code> kural\u0131 ise, form ve butonun k\u00fc\u00e7\u00fck ekranlarda daha iyi g\u00f6r\u00fcnmesini sa\u011flayan basit bir mobil uyumluluk \u00f6rne\u011fidir. Bu entegrasyon, kullan\u0131c\u0131lar\u0131n kolayca g\u00f6rsel i\u00e7erik eklemesini sa\u011flayarak forumunuzun etkile\u015fimini art\u0131racakt\u0131r.<\/p>\n<h2>G\u00fcvenlik ve Validasyon: Y\u00fcklenen Resimleri Nas\u0131l Koruruz?<\/h2>\n<p>Resim y\u00fckleme \u00f6zelli\u011fi eklemek, beraberinde ciddi g\u00fcvenlik sorumluluklar\u0131n\u0131 da getirir. K\u00f6t\u00fc niyetli kullan\u0131c\u0131lar, sunucunuza zararl\u0131 dosyalar y\u00fckleyerek veya a\u015f\u0131r\u0131 b\u00fcy\u00fck dosyalar g\u00f6ndererek hizmetinizi etkilemeye \u00e7al\u0131\u015fabilirler. Bu nedenle, y\u00fckleme s\u00fcrecine s\u0131k\u0131 validasyon (do\u011frulama) ve g\u00fcvenlik \u00f6nlemleri entegre etmek hayati \u00f6neme sahiptir. G\u00fcvenli bir sistem, hem sunucunuzu korur hem de kullan\u0131c\u0131lar\u0131n\u0131z\u0131n verilerini g\u00fcvende tutar. FastAPI, bu t\u00fcr kontrolleri kolayca uygulaman\u0131za olanak tan\u0131r.<\/p>\n<p>\u0130lk olarak, <strong>dosya tipi do\u011frulama<\/strong> (MIME type validation) \u00e7ok \u00f6nemlidir. Sadece belirli resim formatlar\u0131n\u0131n (JPEG, PNG, GIF vb.) y\u00fcklenmesine izin vermelisiniz. Bir \u00f6nceki kod \u00f6rne\u011fimizde <code>if not file.content_type.startswith(\"image\/\")<\/code> ile basit bir kontrol yapm\u0131\u015ft\u0131k. Ancak bu yeterli olmayabilir. <code>content_type<\/code> ba\u015fl\u0131\u011f\u0131 istemci taraf\u0131ndan kolayca manip\u00fcle edilebilir. Daha sa\u011flam bir do\u011frulama i\u00e7in, dosyan\u0131n ilk birka\u00e7 bayt\u0131n\u0131 okuyarak (magic number kontrol\u00fc) dosyan\u0131n ger\u00e7ek t\u00fcr\u00fcn\u00fc sunucu taraf\u0131nda do\u011frulamak gerekir. Python'da <code>python-magic<\/code> veya <code>Pillow<\/code> gibi k\u00fct\u00fcphaneler bu konuda yard\u0131mc\u0131 olabilir. \u00d6rne\u011fin, <code>Pillow<\/code> ile bir dosyan\u0131n a\u00e7\u0131l\u0131p a\u00e7\u0131lamad\u0131\u011f\u0131n\u0131 kontrol etmek, ger\u00e7ekten bir resim dosyas\u0131 oldu\u011funu garanti etmenin g\u00fc\u00e7l\u00fc bir yoludur.<\/p>\n<p>\u0130kinci olarak, <strong>dosya boyutu s\u0131n\u0131r\u0131<\/strong> koymak, hizmet reddi (DoS) sald\u0131r\u0131lar\u0131n\u0131 ve sunucunuzun depolama alan\u0131n\u0131n a\u015f\u0131r\u0131 kullan\u0131lmas\u0131n\u0131 \u00f6nler. \u00c7ok b\u00fcy\u00fck resimler, hem y\u00fckleme s\u00fcresini uzat\u0131r hem de sunucu kaynaklar\u0131n\u0131 t\u00fcketir. FastAPI'de bu kontrol\u00fc kolayca uygulayabilirsiniz. \u00d6rne\u011fin, <code>file.size<\/code> \u00f6zelli\u011fini kullanarak dosyan\u0131n boyutunu byte cinsinden alabilir ve belirli bir \u00fcst s\u0131n\u0131r\u0131n \u00fczerinde olup olmad\u0131\u011f\u0131n\u0131 kontrol edebilirsiniz. Genellikle, web i\u00e7in 2-5 MB resim boyutu makul kabul edilir, ancak forumunuzun ihtiya\u00e7lar\u0131na g\u00f6re bu de\u011feri ayarlayabilirsiniz.<\/p>\n<pre><code class=\"language-python\">\nfrom fastapi import FastAPI, UploadFile, File, HTTPException\nfrom fastapi.responses import JSONResponse\nfrom fastapi.staticfiles import StaticFiles\nimport shutil\nimport os\nimport uuid\nfrom PIL import Image # Pillow k\u00fct\u00fcphanesi\nimport io\n\napp = FastAPI()\n\nUPLOAD_DIRECTORY = \"uploaded_images\"\nMAX_FILE_SIZE = 5 * 1024 * 1024  # 5 MB\n\nif not os.path.exists(UPLOAD_DIRECTORY):\n    os.makedirs(UPLOAD_DIRECTORY)\n\napp.mount(\"\/static\", StaticFiles(directory=UPLOAD_DIRECTORY), name=\"static\")\n\n@app.post(\"\/upload-image-secure\/\")\nasync def upload_image_secure(file: UploadFile = File(...)):\n    if not file.content_type.startswith(\"image\/\"):\n        raise HTTPException(status_code=400, detail=\"Sadece resim dosyalar\u0131 y\u00fcklenebilir.\")\n\n    # Dosya boyutu kontrol\u00fc\n    file.file.seek(0, os.SEEK_END) # Dosya i\u015faret\u00e7isini sona ta\u015f\u0131\n    file_size = file.file.tell() # Boyutu al\n    file.file.seek(0) # Dosya i\u015faret\u00e7isini ba\u015fa geri ta\u015f\u0131\n\n    if file_size > MAX_FILE_SIZE:\n        raise HTTPException(status_code=400, detail=f\"Dosya boyutu {MAX_FILE_SIZE \/ (1024 * 1024):.0f}MB'\u0131 a\u015famaz.\")\n\n    # Ger\u00e7ek resim do\u011frulama (Pillow ile)\n    try:\n        image_data = await file.read() # Dosya i\u00e7eri\u011fini oku\n        Image.open(io.BytesIO(image_data))\n        file.file.seek(0) # Dosya i\u015faret\u00e7isini ba\u015fa geri ta\u015f\u0131, shutil.copyfileobj kullanaca\u011f\u0131m\u0131z i\u00e7in\n\n    except Exception:\n        raise HTTPException(status_code=400, detail=\"Ge\u00e7ersiz veya bozuk resim dosyas\u0131.\")\n\n\n    file_extension = os.path.splitext(file.filename)[1].lower() # Uzant\u0131y\u0131 k\u00fc\u00e7\u00fck harfe \u00e7evir\n    allowed_extensions = [\".jpg\", \".jpeg\", \".png\", \".gif\", \".webp\"]\n\n    if file_extension not in allowed_extensions:\n        raise HTTPException(status_code=400, detail=\"Desteklenmeyen resim format\u0131. Sadece JPG, JPEG, PNG, GIF, WEBP formatlar\u0131 desteklenir.\")\n\n    unique_filename = f\"{uuid.uuid4()}{file_extension}\"\n    file_path = os.path.join(UPLOAD_DIRECTORY, unique_filename)\n\n    try:\n        with open(file_path, \"wb\") as buffer:\n            # Buraya kadar dosya zaten okundu ve Image.open ile kontrol edildi,\n            # o y\u00fczden await file.read() yerine do\u011frudan image_data'y\u0131 yazabiliriz\n            buffer.write(image_data)\n        \n        image_url = f\"\/static\/{unique_filename}\"\n        return JSONResponse(status_code=200, content={\"message\": \"Resim ba\u015far\u0131yla y\u00fcklendi\", \"filename\": unique_filename, \"url\": image_url})\n    except Exception as e:\n        raise HTTPException(status_code=500, detail=f\"Resim y\u00fcklenirken bir hata olu\u015ftu: {str(e)}\")\n    finally:\n        # UploadFile nesnesinin underlying file descriptor'\u0131n\u0131 kapatmak \u00f6nemli\n        # \u00c7\u00fcnk\u00fc image_data'y\u0131 almak i\u00e7in read() kullan\u0131ld\u0131, art\u0131k dosya nesnesine ihtiya\u00e7 kalmad\u0131.\n        # E\u011fer shutil.copyfileobj kullan\u0131lsayd\u0131 file.file.close() gerekli olurdu.\n        # Burada image_data'y\u0131 kulland\u0131\u011f\u0131m\u0131z i\u00e7in file.file nesnesi zaten t\u00fcketilmi\u015f olabilir.\n        # Yine de iyi uygulama olarak kapatma \u00e7a\u011fr\u0131s\u0131 bulundurmakta fayda var.\n        await file.close()\n    <\/pre>\n<p><\/code><\/p>\n<p>\u00dc\u00e7\u00fcnc\u00fc olarak, y\u00fcklenen dosyalar\u0131n sunucu taraf\u0131nda \u00e7al\u0131\u015ft\u0131r\u0131labilir olmamas\u0131n\u0131 sa\u011flamak \u00f6nemlidir. Statik dosya sunumu yapan web sunucular\u0131n\u0131n (Nginx, Apache) yap\u0131land\u0131rmas\u0131nda, <code>uploaded_images<\/code> gibi dizinler i\u00e7in <code>Execute<\/code> izinlerinin devre d\u0131\u015f\u0131 b\u0131rak\u0131ld\u0131\u011f\u0131ndan emin olunmal\u0131d\u0131r. Ayr\u0131ca, y\u00fcklenen dosya adlar\u0131n\u0131 rastgele ve benzersiz hale getirmek (UUID kullanarak), yol ge\u00e7i\u015fi (path traversal) sald\u0131r\u0131lar\u0131n\u0131 engellemeye yard\u0131mc\u0131 olur. Son olarak, resimlerin meta verilerini (EXIF verileri) temizlemek, hassas bilgilerin (konum, kamera modeli vb.) a\u00e7\u0131\u011fa \u00e7\u0131kmas\u0131n\u0131 \u00f6nleyebilir. Pillow k\u00fct\u00fcphanesi bu t\u00fcr i\u015flemler i\u00e7in de kullan\u0131labilir.<\/p>\n<div class=\"expert-tip\">\n        Uzman \u0130pucu: Resimleri y\u00fcklemeden \u00f6nce boyutland\u0131rmak veya s\u0131k\u0131\u015ft\u0131rmak, hem depolama alan\u0131ndan tasarruf sa\u011flar hem de web sitesi performans\u0131n\u0131 art\u0131r\u0131r. Pillow gibi k\u00fct\u00fcphaneler, bu i\u015flemleri sunucu taraf\u0131nda otomatik olarak yapman\u0131z\u0131 sa\u011flar.\n    <\/div>\n<h2>Performans ve \u00d6l\u00e7eklenebilirlik: B\u00fcy\u00fck Forumlar i\u00e7in \u00c7\u00f6z\u00fcmler Nelerdir?<\/h2>\n<p>Forumunuz b\u00fcy\u00fcd\u00fck\u00e7e ve kullan\u0131c\u0131 say\u0131s\u0131 artt\u0131k\u00e7a, resim y\u00fckleme ve sunma performans\u0131 kritik hale gelir. On binlerce veya milyonlarca resimle ba\u015fa \u00e7\u0131kmak, basit bir yerel dosya sistemi kurulumundan daha geli\u015fmi\u015f \u00e7\u00f6z\u00fcmler gerektirir. \u00d6l\u00e7eklenebilirlik, uygulaman\u0131z\u0131n artan y\u00fcke ra\u011fmen h\u0131zl\u0131 ve g\u00fcvenilir kalmas\u0131n\u0131 sa\u011flamakt\u0131r. FastAPI, asenkron yap\u0131s\u0131yla performans avantajlar\u0131 sunsa da, dosya depolama ve da\u011f\u0131t\u0131m stratejileri de bu denklemin \u00f6nemli bir par\u00e7as\u0131d\u0131r.<\/p>\n<p>B\u00fcy\u00fck forumlar i\u00e7in en pop\u00fcler ve etkili \u00e7\u00f6z\u00fcmlerden biri, <strong>bulut tabanl\u0131 nesne depolama (Object Storage)<\/strong> hizmetlerini kullanmakt\u0131r. Amazon S3 (Simple Storage Service), Google Cloud Storage ve Azure Blob Storage bu alandaki \u00f6nde gelen sa\u011flay\u0131c\u0131lard\u0131r. Bu hizmetler, neredeyse s\u0131n\u0131rs\u0131z depolama alan\u0131, y\u00fcksek dayan\u0131kl\u0131l\u0131k, yedeklilik ve y\u00fcksek eri\u015filebilirlik sunar. Resimleri do\u011frudan bu hizmetlere y\u00fcklemek, sunucunuzun disk alan\u0131n\u0131 bo\u015falt\u0131r ve uygulaman\u0131z\u0131n yatay \u00f6l\u00e7eklenebilirli\u011fini art\u0131r\u0131r. \u00d6rne\u011fin, sunucular\u0131n\u0131z aras\u0131nda resim senkronizasyonu konusunda endi\u015felenmenize gerek kalmaz, \u00e7\u00fcnk\u00fc t\u00fcm resimler merkezi bir bulut depolama alan\u0131nda bulunur. FastAPI uygulaman\u0131z, <code>boto3<\/code> (AWS i\u00e7in), <code>google-cloud-storage<\/code> (Google Cloud i\u00e7in) gibi Python SDK'lar\u0131n\u0131 kullanarak bu hizmetlerle kolayca etkile\u015fim kurabilir.<\/p>\n<p>Nesne depolama kullan\u0131rken, FastAPI backend'iniz resmi do\u011frudan istemciden al\u0131p bulut depolama hizmetine aktarabilir. Alternatif olarak, istemciye do\u011frudan bulut depolama hizmetine y\u00fckleme yapmas\u0131 i\u00e7in \u00f6nceden imzalanm\u0131\u015f bir URL (pre-signed URL) verilebilir. Bu y\u00f6ntem, sunucunuzun ara katman olarak dosyay\u0131 i\u015fleme y\u00fck\u00fcn\u00fc azaltarak performans\u0131 daha da art\u0131r\u0131r. \u00d6zellikle b\u00fcy\u00fck boyutlu dosyalar i\u00e7in bu yakla\u015f\u0131m olduk\u00e7a etkilidir. Kullan\u0131c\u0131 resmini do\u011frudan S3'e y\u00fckler, S3 y\u00fckleme tamamland\u0131ktan sonra bir bildirim g\u00f6nderir ve FastAPI backend'iniz bu bildirimi i\u015fleyerek veritaban\u0131na resmin URL'sini kaydeder.<\/p>\n<p>Performans\u0131 daha da art\u0131rmak i\u00e7in, <strong>\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011flar\u0131 (CDN)<\/strong> kullanmak vazge\u00e7ilmezdir. Bir CDN, resimleriniz, CSS ve JavaScript dosyalar\u0131 gibi statik i\u00e7erikleri d\u00fcnya genelindeki sunucularda \u00f6nbelle\u011fe al\u0131r. Bir kullan\u0131c\u0131 forumunuzdaki bir resmi g\u00f6r\u00fcnt\u00fclemek istedi\u011finde, resim ona en yak\u0131n CDN sunucusundan servis edilir. Bu, hem y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r hem de ana sunucunuzun bant geni\u015fli\u011fi ve i\u015flemci y\u00fck\u00fcn\u00fc azalt\u0131r. Amazon CloudFront, Cloudflare, Akamai gibi CDN sa\u011flay\u0131c\u0131lar\u0131, bulut depolama hizmetleriyle sorunsuz bir \u015fekilde entegre olabilir. CDN kullan\u0131m\u0131, forumunuzun k\u00fcresel \u00e7apta h\u0131zl\u0131 ve duyarl\u0131 olmas\u0131n\u0131 sa\u011flar, bu da kullan\u0131c\u0131 deneyimi i\u00e7in b\u00fcy\u00fck bir art\u0131d\u0131r.<\/p>\n<p>Son olarak, resim optimizasyonunu g\u00f6z ard\u0131 etmemek gerekir. Kullan\u0131c\u0131lar taraf\u0131ndan y\u00fcklenen resimlerin otomatik olarak uygun formatlara d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesi (\u00f6rne\u011fin WebP), s\u0131k\u0131\u015ft\u0131r\u0131lmas\u0131 ve farkl\u0131 ekran boyutlar\u0131 i\u00e7in birden fazla \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte olu\u015fturulmas\u0131 (responsive images), performans\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu i\u015flemler, y\u00fckleme s\u0131ras\u0131nda sunucu taraf\u0131nda (Pillow ile) veya bulut depolama hizmetlerinin g\u00f6r\u00fcnt\u00fc i\u015fleme \u00f6zellikleriyle (\u00f6rne\u011fin AWS Lambda ile S3 tetikleyicileri) yap\u0131labilir. Bu \u015fekilde, her kullan\u0131c\u0131n\u0131n cihaz\u0131na en uygun ve en h\u0131zl\u0131 resim teslimat\u0131 sa\u011flan\u0131r. B\u00f6ylece, forumunuzun hem h\u0131zl\u0131 hem de \u00f6l\u00e7eklenebilir kalmas\u0131 sa\u011flan\u0131r.<\/p>\n<h2>Mobil Uyumluluk ve Kullan\u0131c\u0131 Deneyimi: Duyarl\u0131 Tasar\u0131m \u0130pu\u00e7lar\u0131<\/h2>\n<p>G\u00fcn\u00fcm\u00fczde internet kullan\u0131c\u0131lar\u0131n\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011fu mobil cihazlar \u00fczerinden web sitelerine eri\u015fmektedir. Bu nedenle, forumunuzun resim y\u00fckleme \u00f6zelli\u011finin mobil cihazlarda da sorunsuz ve kullan\u0131c\u0131 dostu olmas\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Duyarl\u0131 tasar\u0131m (Responsive Design), farkl\u0131 ekran boyutlar\u0131na ve cihazlara otomatik olarak uyum sa\u011flayan web siteleri olu\u015fturman\u0131n temelidir. \u0130yi bir kullan\u0131c\u0131 deneyimi (UX), sadece i\u015flevsellik de\u011fil, ayn\u0131 zamanda kullan\u0131m kolayl\u0131\u011f\u0131 ve g\u00f6rsel \u00e7ekicilik de demektir.<\/p>\n<p>\u0130lk olarak, <strong>HTML ve CSS<\/strong> kullanarak duyarl\u0131 formlar ve resim \u00f6nizlemeleri olu\u015fturmak esast\u0131r. <code>meta viewport<\/code> etiketini HTML ba\u015fl\u0131\u011f\u0131na eklemek, taray\u0131c\u0131n\u0131n sayfan\u0131n geni\u015fli\u011fini cihaz\u0131n geni\u015fli\u011fine ayarlamas\u0131n\u0131 ve ilk \u00f6l\u00e7eklemeyi 1.0 olarak ayarlamas\u0131n\u0131 sa\u011flar. Bu, mobil cihazlarda sayfan\u0131n do\u011fru \u015fekilde g\u00f6r\u00fcnt\u00fclenmesi i\u00e7in olmazsa olmazd\u0131r. Input alanlar\u0131 ve butonlar gibi form elemanlar\u0131, k\u00fc\u00e7\u00fck ekranlarda daralmamal\u0131 veya ta\u015fmamal\u0131d\u0131r. <code>max-width: 100%<\/code> ve <code>height: auto<\/code> gibi CSS kurallar\u0131, y\u00fcklenen resim \u00f6nizlemelerinin konteynerlerine s\u0131\u011fmas\u0131n\u0131 ve bozulmamas\u0131n\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-css\">\n\/* \u00d6rnek Mobil Uyumluluk CSS Kurallar\u0131 *\/\n.container {\n    padding: 20px;\n    margin: 20px auto; \/* K\u00fc\u00e7\u00fck ekranlarda kenar bo\u015fluklar\u0131n\u0131 azalt *\/\n}\n\ninput[type=\"file\"], button {\n    width: 100%; \/* Mobil cihazlarda input ve butonlar\u0131n tam geni\u015flikte olmas\u0131n\u0131 sa\u011fla *\/\n    box-sizing: border-box; \/* Padding ve border'\u0131n geni\u015fli\u011fe dahil olmas\u0131n\u0131 sa\u011fla *\/\n}\n\n#uploadedImagePreview {\n    max-width: 100%; \/* Resimlerin kapsay\u0131c\u0131ya s\u0131\u011fmas\u0131n\u0131 sa\u011fla *\/\n    height: auto; \/* Oranlar\u0131 koru *\/\n}\n\n@media (max-width: 600px) {\n    body {\n        font-size: 14px; \/* K\u00fc\u00e7\u00fck ekranlarda yaz\u0131 boyutunu k\u00fc\u00e7\u00fclt *\/\n    }\n    h1 {\n        font-size: 22px; \/* Ba\u015fl\u0131k boyutunu ayarla *\/\n    }\n    .container {\n        padding: 15px; \/* Daha az padding *\/\n        margin: 10px; \/* Daha k\u00fc\u00e7\u00fck d\u0131\u015f bo\u015fluk *\/\n    }\n}\n    <\/pre>\n<p><\/code><\/p>\n<p>\u0130kinci olarak, <strong>kullan\u0131c\u0131 geri bildirimi ve ilerleme g\u00f6stergeleri<\/strong> mobil cihazlarda daha da kritik hale gelir. Mobil ba\u011flant\u0131lar genellikle daha yava\u015f olabilir, bu nedenle bir resmin y\u00fcklendi\u011fini g\u00f6steren bir spinner veya ilerleme \u00e7ubu\u011fu, kullan\u0131c\u0131n\u0131n sab\u0131rla beklemesini sa\u011flar ve uygulaman\u0131n donmad\u0131\u011f\u0131 hissini verir. JavaScript ile Fetch API'nin <code>onprogress<\/code> olay\u0131 gibi \u00f6zellikler veya basit bir CSS tabanl\u0131 spinner, bu t\u00fcr geri bildirimleri sa\u011flamak i\u00e7in kullan\u0131labilir. Ayr\u0131ca, dosya boyutu limitleri veya desteklenmeyen dosya t\u00fcrleri gibi hatalar\u0131 anla\u015f\u0131l\u0131r ve an\u0131nda bir \u015fekilde kullan\u0131c\u0131ya iletmek, hayal k\u0131r\u0131kl\u0131\u011f\u0131n\u0131 \u00f6nler.<\/p>\n<p>\u00dc\u00e7\u00fcnc\u00fc olarak, mobil cihazlar i\u00e7in \u00f6zel resim boyutland\u0131rma ve s\u0131k\u0131\u015ft\u0131rma stratejileri benimsemek, hem veri kullan\u0131m\u0131n\u0131 azalt\u0131r hem de y\u00fckleme s\u00fcrelerini iyile\u015ftirir. Backend taraf\u0131nda resimleri i\u015flerken, mobil cihazlar i\u00e7in optimize edilmi\u015f (daha d\u00fc\u015f\u00fck \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ve daha s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f) versiyonlar\u0131n\u0131 olu\u015fturup sunmak, kullan\u0131c\u0131lara daha h\u0131zl\u0131 bir deneyim sunar. <code><picture><\/code> etiketi veya <code>srcset<\/code> \u00f6zelli\u011fi ile farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerdeki resimleri tan\u0131mlayarak taray\u0131c\u0131n\u0131n en uygun olan\u0131 se\u00e7mesini sa\u011flayabilirsiniz. Ayr\u0131ca, tembel y\u00fckleme (lazy loading) teknikleri kullanarak, sayfa ba\u015flang\u0131c\u0131nda sadece g\u00f6r\u00fcnen resimlerin y\u00fcklenmesini sa\u011flamak da genel performans\u0131 art\u0131r\u0131r.<\/p>\n<p>Son olarak, dokunmatik dostu aray\u00fczler tasarlamak da \u00f6nemlidir. B\u00fcy\u00fck butonlar, yeterli bo\u015fluklar ve kolayca t\u0131klanabilir alanlar, mobil kullan\u0131c\u0131lar\u0131n rahat\u00e7a etkile\u015fim kurmas\u0131n\u0131 sa\u011flar. Resim se\u00e7imi i\u00e7in standart mobil sistem aray\u00fcz\u00fcn\u00fc kullanmak (\u00f6rne\u011fin galeriden se\u00e7im veya kamera ile \u00e7ekim) kullan\u0131c\u0131lar\u0131n zaten a\u015fina oldu\u011fu bir deneyim sunar. T\u00fcm bu detaylara dikkat ederek, FastAPI ile olu\u015fturdu\u011funuz forumunuzdaki resim y\u00fckleme \u00f6zelli\u011fi, t\u00fcm cihazlarda kusursuz bir kullan\u0131c\u0131 deneyimi sunacakt\u0131r.<\/p>\n<h2>Sonu\u00e7: FastAPI ile G\u00fc\u00e7l\u00fc Resim Y\u00fckleme<\/h2>\n<p>FastAPI ile forumunuzda resim y\u00fckleme \u00f6zelli\u011fini ba\u015far\u0131yla entegre etmek, kullan\u0131c\u0131 etkile\u015fimini ve i\u00e7eri\u011fin zenginli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r. Bu makale boyunca, FastAPI'nin <code>UploadFile<\/code> ve <code>File<\/code> ba\u011f\u0131ml\u0131l\u0131k enjeksiyonlar\u0131 sayesinde backend'de nas\u0131l g\u00fc\u00e7l\u00fc ve esnek bir API olu\u015fturulaca\u011f\u0131n\u0131, frontend'de Fetch API ile nas\u0131l entegrasyon yap\u0131laca\u011f\u0131n\u0131 ve en \u00f6nemlisi, g\u00fcvenlik, validasyon, performans ve mobil uyumluluk gibi kritik konular\u0131 nas\u0131l ele alaca\u011f\u0131m\u0131z\u0131 detayl\u0131 bir \u015fekilde inceledik. Modern web uygulamalar\u0131 i\u00e7in vazge\u00e7ilmez olan bu \u00f6zellik, do\u011fru uyguland\u0131\u011f\u0131nda forumunuzu daha dinamik, \u00e7ekici ve kullan\u0131labilir hale getirir.<\/p>\n<p>Yerel dosya sisteminden bulut tabanl\u0131 depolama \u00e7\u00f6z\u00fcmlerine ge\u00e7i\u015f, CDN kullan\u0131m\u0131 ile h\u0131zland\u0131rma, s\u0131k\u0131 g\u00fcvenlik kontrolleri ve duyarl\u0131 tasar\u0131m prensipleri, uygulaman\u0131z\u0131n gelecekteki b\u00fcy\u00fcmesine haz\u0131r olmas\u0131n\u0131 sa\u011flar. Unutmay\u0131n ki, her teknik \u00f6zelli\u011fin ard\u0131nda bir kullan\u0131c\u0131 deneyimi ve bir i\u015f gereksinimi yatar. Bu rehberde \u00f6\u011frendi\u011finiz bilgilerle, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n forumunuzda daha fazla vakit ge\u00e7irmesini ve de\u011ferli i\u00e7erikler \u00fcretmesini te\u015fvik edeceksiniz. FastAPI'nin sundu\u011fu kolayl\u0131klar ve Python ekosisteminin geni\u015f imkanlar\u0131 sayesinde, bu ad\u0131mlar\u0131 atarak \u00e7ok daha sa\u011flam ve etkileyici bir forum uygulamas\u0131 in\u015fa edebilirsiniz. \u015eimdi s\u0131ra sizde; \u00f6\u011frendiklerinizi uygulay\u0131n ve forumunuzu bir sonraki seviyeye ta\u015f\u0131y\u0131n!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<ul>\n<li>\n            <strong>S: Y\u00fcklenen resimleri veritaban\u0131nda m\u0131 yoksa dosya sisteminde mi saklamal\u0131y\u0131m?<\/strong><\/p>\n<p><strong>C:<\/strong> Genellikle resimlerin kendisi dosya sisteminde veya bulut depolama hizmetlerinde (S3 gibi) saklan\u0131r. Veritaban\u0131nda ise sadece resmin yolu (URL), boyutu, y\u00fcklenme tarihi ve kimin y\u00fckledi\u011fi gibi meta veriler tutulur. Do\u011frudan veritaban\u0131nda saklamak (BLOB olarak), veritaban\u0131n\u0131n performans\u0131n\u0131 olumsuz etkileyebilir ve y\u00f6netimi zorla\u015ft\u0131rabilir.<\/p>\n<\/li>\n<li>\n            <strong>S: FastAPI resimleri otomatik olarak s\u0131k\u0131\u015ft\u0131r\u0131r m\u0131 veya boyutland\u0131r\u0131r m\u0131?<\/strong><\/p>\n<p><strong>C:<\/strong> Hay\u0131r, FastAPI sadece dosya y\u00fckleme mekanizmas\u0131n\u0131 sa\u011flar. Resimleri s\u0131k\u0131\u015ft\u0131rmak veya boyutland\u0131rmak i\u00e7in Pillow (PIL Fork) gibi \u00fc\u00e7\u00fcnc\u00fc taraf Python k\u00fct\u00fcphanelerini kullanman\u0131z gerekir. Bu i\u015flemler genellikle sunucu taraf\u0131nda, dosya diske kaydedilmeden \u00f6nce veya kaydedildikten hemen sonra yap\u0131l\u0131r.<\/p>\n<\/li>\n<li>\n            <strong>S: Y\u00fcklenen resimleri nas\u0131l g\u00fcvenli hale getirebilirim?<\/strong><\/p>\n<p><strong>C:<\/strong> G\u00fcvenli\u011fi sa\u011flamak i\u00e7in dosya tipi (MIME type ve magic number) do\u011frulamas\u0131, dosya boyutu s\u0131n\u0131r\u0131, k\u00f6t\u00fc ama\u00e7l\u0131 dosya i\u00e7erik kontrol\u00fc (\u00f6rne\u011fin vir\u00fcs taramas\u0131), resimlerin statik bir dizinde \u00e7al\u0131\u015ft\u0131r\u0131labilir yetkileri olmadan saklanmas\u0131 ve benzersiz dosya adlar\u0131 kullan\u0131lmas\u0131 \u00f6nemlidir. Ayr\u0131ca, kullan\u0131c\u0131lar\u0131n sadece kendi y\u00fckledikleri resimleri silebilmesi veya d\u00fczenleyebilmesi gibi yetkilendirme kontrolleri de uygulanmal\u0131d\u0131r.<\/p>\n<\/li>\n<li>\n            <strong>S: Mobil cihazlar i\u00e7in \u00f6zel bir i\u015flem yapmam gerekiyor mu?<\/strong><\/p>\n<p><strong>C:<\/strong> Evet, mobil uyumluluk i\u00e7in duyarl\u0131 tasar\u0131m (CSS media queries), performans\u0131 art\u0131rmak amac\u0131yla resimlerin farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerde sunulmas\u0131 (srcset veya <picture> etiketi), tembel y\u00fckleme (lazy loading) ve kullan\u0131c\u0131ya y\u00fckleme s\u0131ras\u0131nda geri bildirim sa\u011flayan aray\u00fczler tasarlamak \u00f6nemlidir.<\/p>\n<\/li>\n<li>\n            <strong>S: CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) kullanmak neden \u00f6nemli?<\/strong><\/p>\n<p><strong>C:<\/strong> CDN, statik i\u00e7eriklerinizi (resimler, CSS, JS) d\u00fcnya genelindeki sunucularda \u00f6nbelle\u011fe alarak kullan\u0131c\u0131lara co\u011frafi olarak en yak\u0131n noktadan sunulmas\u0131n\u0131 sa\u011flar. Bu durum, hem sayfa y\u00fckleme s\u00fcrelerini dramatik \u015fekilde k\u0131salt\u0131r hem de ana sunucunuzun y\u00fck\u00fcn\u00fc azaltarak daha iyi bir performans ve \u00f6l\u00e7eklenebilirlik sa\u011flar.<\/p>\n<\/li>\n<\/ul>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-33396","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9<\/title>\n<meta name=\"description\" content=\"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu ad\u0131m ad\u0131m rehberde, g\u00fcvenli ve performansl\u0131 bir \u015fekilde resimlerin nas\u0131l y\u00fcklenece\u011fini ve y\u00f6netilece\u011fini ke\u015ffedeceksiniz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9\" \/>\n<meta property=\"og:description\" content=\"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu ad\u0131m ad\u0131m rehberde, g\u00fcvenli ve performansl\u0131 bir \u015fekilde resimlerin nas\u0131l y\u00fcklenece\u011fini ve y\u00f6netilece\u011fini ke\u015ffedeceksiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-02T07:01:58+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9\",\"datePublished\":\"2025-11-02T07:01:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\"},\"wordCount\":3973,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\",\"name\":\"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-02T07:01:58+00:00\",\"description\":\"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu ad\u0131m ad\u0131m rehberde, g\u00fcvenli ve performansl\u0131 bir \u015fekilde resimlerin nas\u0131l y\u00fcklenece\u011fini ve y\u00f6netilece\u011fini ke\u015ffedeceksiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9","description":"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu ad\u0131m ad\u0131m rehberde, g\u00fcvenli ve performansl\u0131 bir \u015fekilde resimlerin nas\u0131l y\u00fcklenece\u011fini ve y\u00f6netilece\u011fini ke\u015ffedeceksiniz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/","og_locale":"tr_TR","og_type":"article","og_title":"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9","og_description":"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu ad\u0131m ad\u0131m rehberde, g\u00fcvenli ve performansl\u0131 bir \u015fekilde resimlerin nas\u0131l y\u00fcklenece\u011fini ve y\u00f6netilece\u011fini ke\u015ffedeceksiniz.","og_url":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-02T07:01:58+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"24 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9","datePublished":"2025-11-02T07:01:58+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/"},"wordCount":3973,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/","url":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/","name":"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-02T07:01:58+00:00","description":"Forumunuzda kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik \u00e7e\u015fitlili\u011fini art\u0131rmak m\u0131 istiyorsunuz? FastAPI ile resim y\u00fckleme \u00f6zelli\u011fi eklemek, bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. Bu ad\u0131m ad\u0131m rehberde, g\u00fcvenli ve performansl\u0131 bir \u015fekilde resimlerin nas\u0131l y\u00fcklenece\u011fini ve y\u00f6netilece\u011fini ke\u015ffedeceksiniz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/fastapi-ile-forumda-resim-yukleme-adim-9\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"FastAPI ile Forumda Resim Y\u00fckleme: Ad\u0131m 9"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33396"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33396\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}