{"id":36890,"date":"2025-12-24T14:41:50","date_gmt":"2025-12-24T11:41:50","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36890"},"modified":"2025-12-24T14:41:50","modified_gmt":"2025-12-24T11:41:50","slug":"vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/","title":{"rendered":"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm"},"content":{"rendered":"<p><body><\/p>\n<h2>Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm<\/h2>\n<p>Modern web uygulamalar\u0131, kullan\u0131c\u0131lar\u0131n profil resimleri, \u00fcr\u00fcn g\u00f6rselleri veya di\u011fer multimedya i\u00e7eriklerini y\u00fcklemelerine olanak tan\u0131yan g\u00fc\u00e7l\u00fc resim y\u00fckleme \u00f6zelliklerine ihtiya\u00e7 duyar. Ancak, bu i\u015flevi s\u0131f\u0131rdan olu\u015fturmak, dosya se\u00e7imi, \u00f6nizleme, k\u0131rpma, do\u011frulama ve sunucuya g\u00f6nderme gibi bir\u00e7ok karma\u015f\u0131k ad\u0131m\u0131 i\u00e7erir. Neyse ki, Vue.js ekosistemi bu s\u00fcreci b\u00fcy\u00fck \u00f6l\u00e7\u00fcde basitle\u015ftiren harika bile\u015fenler sunar. Bu rehberde, Vue.js uygulamalar\u0131n\u0131zda kullan\u0131c\u0131 dostu ve i\u015flevsel bir resim y\u00fckleme deneyimi olu\u015fturmak i\u00e7in tasarlanm\u0131\u015f pop\u00fcler bir bile\u015fen olan <code>vue-picture-input<\/code>&#8216;\u0131 inceleyece\u011fiz.<\/p>\n<p><code>vue-picture-input<\/code>, kullan\u0131c\u0131lar\u0131n s\u00fcr\u00fckle-b\u0131rak y\u00f6ntemiyle veya standart dosya se\u00e7ici ile kolayca resim y\u00fcklemesini sa\u011flayan, \u00f6nizleme ve temel k\u0131rpma yetenekleri sunan hafif ve esnek bir Vue bile\u015fenidir. Bu rehberde, bile\u015fenin kurulumundan geli\u015fmi\u015f kullan\u0131m\u0131na, arka u\u00e7 entegrasyonundan s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan sorunlara kadar her \u015feyi ad\u0131m ad\u0131m ele alaca\u011f\u0131z.<\/p>\n<h3>vue-picture-input Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h3>\n<p><code>vue-picture-input<\/code>, kullan\u0131c\u0131lar\u0131n resim se\u00e7mesini, \u00f6nizlemesini ve iste\u011fe ba\u011fl\u0131 olarak k\u0131rpmas\u0131n\u0131 sa\u011flayan bir Vue.js bile\u015fenidir. Standart HTML <code><input type=\"file\"><\/code> elementinin sundu\u011fu temel i\u015flevselli\u011fin \u00f6tesine ge\u00e7erek, daha zengin bir kullan\u0131c\u0131 deneyimi sunar. Neden bu bile\u015feni tercih etmelisiniz?<\/p>\n<ul>\n<li><strong>Kullan\u0131c\u0131 Dostu Aray\u00fcz:<\/strong> S\u00fcr\u00fckle-b\u0131rak deste\u011fi ve g\u00f6rsel \u00f6nizleme ile kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. Kullan\u0131c\u0131lar\u0131n y\u00fckledikleri resmi an\u0131nda g\u00f6rmeleri, hatalar\u0131 azalt\u0131r ve memnuniyeti art\u0131r\u0131r.<\/li>\n<li><strong>\u00d6nizleme ve K\u0131rpma:<\/strong> Y\u00fcklenen resmi an\u0131nda g\u00f6sterir ve basit bir k\u0131rpma aray\u00fcz\u00fc sunarak kullan\u0131c\u0131lar\u0131n resmi istedikleri boyuta veya orana getirmesine olanak tan\u0131r. Bu, \u00f6zellikle profil resimleri gibi belirli boyutland\u0131rma gerektiren durumlarda \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<li><strong>Do\u011frulama:<\/strong> Dosya boyutu, resim t\u00fcr\u00fc (JPG, PNG vb.) ve resim boyutlar\u0131 (geni\u015flik\/y\u00fckseklik) gibi temel do\u011frulamalar\u0131 bile\u015fen seviyesinde yapabilir. Bu, sunucuya ge\u00e7ersiz dosyalar\u0131n g\u00f6nderilmesini engelleyerek hem bant geni\u015fli\u011finden tasarruf sa\u011flar hem de sunucu y\u00fck\u00fcn\u00fc azalt\u0131r.<\/li>\n<li><strong>Esneklik ve \u00d6zelle\u015ftirme:<\/strong> Bir\u00e7ok prop (\u00f6zellik) arac\u0131l\u0131\u011f\u0131yla g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve davran\u0131\u015f\u0131n\u0131 kolayca \u00f6zelle\u015ftirebilirsiniz. Renkler, metinler, boyutlar ve daha fazlas\u0131 \u00fczerinde kontrol sahibisiniz.<\/li>\n<li><strong>Hafif ve Kolay Entegrasyon:<\/strong> Minimal ba\u011f\u0131ml\u0131l\u0131klara sahiptir ve Vue.js projenize h\u0131zl\u0131ca entegre edilebilir.<\/li>\n<\/ul>\n<p>Geleneksel <code><input type=\"file\"><\/code> ile u\u011fra\u015fmak, \u00f6nizleme olu\u015fturmak, JavaScript ile resim boyutlar\u0131n\u0131 manip\u00fcle etmek ve s\u00fcr\u00fckle-b\u0131rak i\u015flevselli\u011fi eklemek genellikle zaman al\u0131c\u0131 ve hataya a\u00e7\u0131k bir s\u00fcre\u00e7tir. <code>vue-picture-input<\/code>, bu karma\u015f\u0131kl\u0131\u011f\u0131 soyutlayarak geli\u015ftiricilerin daha h\u0131zl\u0131 ve verimli bir \u015fekilde resim y\u00fckleme \u00f6zelliklerini uygulamalar\u0131na olanak tan\u0131r.<\/p>\n<h3>Kurulum ve Temel Kullan\u0131m<\/h3>\n<p><code>vue-picture-input<\/code>&#8216;\u0131 projenize dahil etmek olduk\u00e7a basittir. \u0130lk ad\u0131m olarak, paketi npm veya yarn kullanarak kurman\u0131z gerekir.<\/p>\n<h4>Kurulum<\/h4>\n<pre><code class=\"language-bash\">\n<h2>npm ile<\/h2>\nnpm install vue-picture-input\n\n<h2>yarn ile<\/h2>\nyarn add vue-picture-input\n<\/code><\/pre>\n<h4>Bile\u015feni Kaydetme ve Kullanma<\/h4>\n<p>Kurulumdan sonra, bile\u015feni Vue uygulaman\u0131zda kullanmaya ba\u015flayabilirsiniz. Genellikle, ana Vue dosyan\u0131zda (\u00f6rne\u011fin, <code>main.js<\/code> veya <code>main.ts<\/code>) global olarak kaydedebilir veya kullanaca\u011f\u0131n\u0131z bile\u015fenin <code><script><\/code> blo\u011funda yerel olarak import edebilirsiniz.<\/p>\n<h5>Global Kay\u0131t (main.js\/main.ts)<\/h5>\n<pre><code class=\"language-javascript\">\n\/\/ main.js\nimport { createApp } from 'vue';\nimport App from '.\/App.vue';\nimport PictureInput from 'vue-picture-input';\n\nconst app = createApp(App);\napp.component('PictureInput', PictureInput); \/\/ Bile\u015feni global olarak kaydet\napp.mount('#app');\n<\/code><\/pre>\n<p>Global olarak kaydetti\u011finizde, uygulaman\u0131zdaki herhangi bir bile\u015fende do\u011frudan <code><picture-input><\/picture-input><\/code> etiketini kullanabilirsiniz.<\/p>\n<h5>Yerel Kay\u0131t (Tekil Bile\u015fen \u0130\u00e7inde)<\/h5>\n<p>Daha yayg\u0131n ve \u00f6nerilen bir y\u00f6ntem, bile\u015feni yaln\u0131zca ihtiyac\u0131n\u0131z olan Vue bile\u015fenleri i\u00e7inde yerel olarak kaydetmektir.<\/p>\n<pre><code class=\"language-vue\">\n<template>\n  <div>\n    <h3>Profil Resmi Y\u00fckle<\/h3>\n    <picture-input\n      ref=\"pictureInput\"\n      width=\"300\"\n      height=\"300\"\n      margin=\"16\"\n      accept=\"image\/jpeg,image\/png\"\n      size=\"10\"\n      buttonClass=\"btn btn-primary\"\n      :customStrings=\"{\n        upload: '',\n        drag: 'Resmi buraya s\u00fcr\u00fckle veya t\u0131kla',\n        tap: 'Resmi se\u00e7mek i\u00e7in dokun',\n        change: 'De\u011fi\u015ftir',\n        remove: 'Kald\u0131r',\n        select: 'Resim Se\u00e7',\n        fileSize: 'Dosya boyutu \u00e7ok b\u00fcy\u00fck',\n        fileType: 'Desteklenmeyen dosya t\u00fcr\u00fc'\n      }\"\n      @change=\"onChange\">\n    <\/picture-input>\n    <div v-if=\"imageData\">\n      <h4>Y\u00fcklenen Resim \u00d6nizlemesi (Base64)<\/h4>\n      <img :src=\"imageData\" alt=\"Y\u00fcklenen Resim\" style=\"max-width: 200px; border: 1px solid #eee;\" \/>\n      <p>Boyut: {{ imageSize }} KB<\/p>\n    <\/div>\n  <\/div>\n<\/template>\n\n<script>\nimport PictureInput from 'vue-picture-input';\n\nexport default {\n  components: {\n    PictureInput,\n  },\n  data() {\n    return {\n      imageData: null,\n      imageSize: 0\n    };\n  },\n  methods: {\n    onChange(image) {\n      console.log('Resim de\u011fi\u015fti!');\n      if (image) {\n        console.log('Resim mevcut:', image);\n        this.imageData = image; \/\/ Base64 format\u0131nda resim verisi\n        \/\/ Base64 string'inin boyutunu hesaplama (yakla\u015f\u0131k)\n        this.imageSize = Math.round((image.length * 0.75) \/ 1024);\n      } else {\n        console.log('Resim yok.');\n        this.imageData = null;\n        this.imageSize = 0;\n      }\n    },\n  },\n};\n<\/script>\n\n<style scoped>\n\/<em> \u0130ste\u011fe ba\u011fl\u0131 olarak PictureInput bile\u015fenini stilize edebilirsiniz <\/em>\/\n\/<em> \u00d6rne\u011fin, varsay\u0131lan birincil buton rengini de\u011fi\u015ftirmek i\u00e7in <\/em>\/\n\/<em> .picture-input__button { background-color: #28a745; } <\/em>\/\n<\/style>\n<\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte:<\/p>\n<ul>\n<li><code>ref=\"pictureInput\"<\/code>: Bile\u015fene eri\u015fmek i\u00e7in bir referans tan\u0131mlar.<\/li>\n<li><code>width<\/code>, <code>height<\/code>, <code>margin<\/code>: Bile\u015fenin g\u00f6r\u00fcn\u00fcm boyutlar\u0131n\u0131 ayarlar.<\/li>\n<li><code>accept=\"image\/jpeg,image\/png\"<\/code>: Sadece JPEG ve PNG resim dosyalar\u0131n\u0131 kabul eder.<\/li>\n<li><code>size=\"10\"<\/code>: Maksimum dosya boyutunu 10 MB olarak belirler.<\/li>\n<li><code>buttonClass=\"btn btn-primary\"<\/code>: Bile\u015fenin i\u00e7indeki butonlara \u00f6zel bir CSS s\u0131n\u0131f\u0131 ekler (\u00f6rne\u011fin, Bootstrap s\u0131n\u0131flar\u0131).<\/li>\n<li><code>:customStrings<\/code>: Bile\u015fen i\u00e7indeki varsay\u0131lan metinleri \u00f6zelle\u015ftirmenizi sa\u011flar. Bu, \u00e7ok dilli uygulamalar i\u00e7in veya sadece farkl\u0131 bir ifade kullanmak istedi\u011finizde \u00e7ok faydal\u0131d\u0131r.<\/li>\n<li><code>@change=\"onChange\"<\/code>: Kullan\u0131c\u0131 bir resim se\u00e7ti\u011finde veya mevcut resmi de\u011fi\u015ftirdi\u011finde tetiklenen olay dinleyicisidir. Bu olay, y\u00fcklenen resmin Base64 kodlu dize halini (veya <code>null<\/code> e\u011fer resim kald\u0131r\u0131l\u0131rsa) parametre olarak d\u00f6nd\u00fcr\u00fcr.<\/li>\n<\/ul>\n<h3>Geli\u015fmi\u015f \u00d6zellikler ve Konfig\u00fcrasyon<\/h3>\n<p><code>vue-picture-input<\/code>, proplar arac\u0131l\u0131\u011f\u0131yla zengin bir \u00f6zelle\u015ftirme ve kontrol yelpazesi sunar. \u0130\u015fte baz\u0131 \u00f6nemli proplar ve bunlar\u0131n kullan\u0131m\u0131:<\/p>\n<h4>\u00d6nemli Proplar<\/h4>\n<ul>\n<li><code>width<\/code>, <code>height<\/code> (Number, String): Bile\u015fenin geni\u015fli\u011fini ve y\u00fcksekli\u011fini belirler. Piksel de\u011feri veya y\u00fczde olarak verilebilir (\u00f6rn. <code>\"300\"<\/code>, <code>\"100%\"<\/code>).<\/li>\n<li><code>margin<\/code> (Number, String): Resim alan\u0131n\u0131n kenar bo\u015flu\u011funu belirler.<\/li>\n<li><code>radius<\/code> (Number, String): Resim alan\u0131n\u0131n kenar yuvarlama miktar\u0131n\u0131 belirler (border-radius).<\/li>\n<li><code>accept<\/code> (String): Kabul edilecek dosya t\u00fcrlerini MIME tipleri olarak belirtir (\u00f6rn. <code>\"image\/jpeg,image\/png\"<\/code>).<\/li>\n<li><code>size<\/code> (Number): Maksimum dosya boyutunu MB cinsinden belirler.<\/li>\n<li><code>removable<\/code> (Boolean): Resmin kald\u0131r\u0131lmas\u0131na izin verilip verilmeyece\u011fini belirler (varsay\u0131lan: <code>false<\/code>).<\/li>\n<li><code>customStrings<\/code> (Object): Bile\u015fen i\u00e7indeki t\u00fcm metinleri \u00f6zelle\u015ftirmenizi sa\u011flar. Yukar\u0131daki \u00f6rnekte g\u00f6sterildi\u011fi gibi kullan\u0131l\u0131r.<\/li>\n<li><code>prefill<\/code> (String): \u00d6nceden y\u00fcklenmi\u015f bir resmin URL'sini veya Base64 dizesini g\u00f6sterir. Bu, mevcut bir profil resmini d\u00fczenlerken kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<li><code>crop<\/code> (Boolean): K\u0131rpma \u00f6zelli\u011fini etkinle\u015ftirir veya devre d\u0131\u015f\u0131 b\u0131rak\u0131r (varsay\u0131lan: <code>true<\/code>).<\/li>\n<li><code>cropRatio<\/code> (String): K\u0131rpma alan\u0131n\u0131n oran\u0131n\u0131 belirler (\u00f6rn. <code>\"1:1\"<\/code>, <code>\"16:9\"<\/code>).<\/li>\n<li><code>toggleCrop<\/code> (Boolean): K\u0131rpma modunu programatik olarak a\u00e7\u0131p kapat\u0131r.<\/li>\n<li><code>plain<\/code> (Boolean): Varsay\u0131lan stilin \u00e7o\u011funu kald\u0131rarak daha sade bir g\u00f6r\u00fcn\u00fcm sunar. Kendi CSS'inizle tamamen \u00f6zelle\u015ftirmek istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<li><code>id<\/code>, <code>name<\/code> (String): Standart HTML input elementleri gibi ID ve name \u00f6zellikleri ataman\u0131z\u0131 sa\u011flar. Form g\u00f6nderimleri i\u00e7in \u00f6nemlidir.<\/li>\n<li><code>hideChangeButton<\/code> (Boolean): \"De\u011fi\u015ftir\" butonunu gizler.<\/li>\n<\/ul>\n<h4>Olaylar (Events)<\/h4>\n<ul>\n<li><code>@change(image)<\/code>: Bir resim se\u00e7ildi\u011finde, de\u011fi\u015ftirildi\u011finde veya kald\u0131r\u0131ld\u0131\u011f\u0131nda tetiklenir. <code>image<\/code> parametresi, Base64 format\u0131ndaki resim verisini (veya <code>null<\/code>) i\u00e7erir.<\/li>\n<li><code>@remove()<\/code>: Sadece resim kald\u0131r\u0131ld\u0131\u011f\u0131nda tetiklenir (<code>removable<\/code> prop'u <code>true<\/code> ise).<\/li>\n<\/ul>\n<h4>Geli\u015fmi\u015f Kullan\u0131m \u00d6rne\u011fi: Mevcut Resim ile D\u00fczenleme<\/h4>\n<p>Kullan\u0131c\u0131n\u0131n mevcut bir profil resmini d\u00fczenlemesine izin veren bir senaryo d\u00fc\u015f\u00fcnelim. <code>prefill<\/code> prop'u bu i\u015f i\u00e7in idealdir.<\/p>\n<pre><code class=\"language-vue\">\n<template>\n  <div>\n    <h3>Profil Resmini D\u00fczenle<\/h3>\n    <picture-input\n      ref=\"editPictureInput\"\n      width=\"250\"\n      height=\"250\"\n      margin=\"10\"\n      radius=\"50%\"\n      accept=\"image\/jpeg,image\/png\"\n      size=\"5\"\n      :prefill=\"existingProfileImage\"\n      :removable=\"true\"\n      :crop=\"true\"\n      cropRatio=\"1:1\"\n      @change=\"onEditChange\"\n      @remove=\"onEditRemove\">\n    <\/picture-input>\n    <div v-if=\"editedImageData\">\n      <h4>Yeni Resim \u00d6nizlemesi<\/h4>\n      <img :src=\"editedImageData\" alt=\"Yeni Profil Resmi\" style=\"max-width: 150px; border-radius: 50%;\" \/>\n    <\/div>\n    <button @click=\"saveProfileImage\" :disabled=\"!editedImageData\">Resmi Kaydet<\/button>\n  <\/div>\n<\/template>\n\n<script>\nimport PictureInput from 'vue-picture-input';\n\nexport default {\n  components: {\n    PictureInput,\n  },\n  data() {\n    return {\n      existingProfileImage: 'https:\/\/via.placeholder.com\/250\/0000FF\/FFFFFF?text=Mevcut+Profil', \/\/ Mevcut resmin URL'si veya Base64\n      editedImageData: null,\n    };\n  },\n  methods: {\n    onEditChange(image) {\n      this.editedImageData = image; \/\/ Yeni se\u00e7ilen resim (Base64)\n      console.log('Yeni resim se\u00e7ildi veya de\u011fi\u015ftirildi.');\n    },\n    onEditRemove() {\n      this.editedImageData = null; \/\/ Resim kald\u0131r\u0131ld\u0131\n      console.log('Mevcut resim kald\u0131r\u0131ld\u0131.');\n    },\n    saveProfileImage() {\n      if (this.editedImageData) {\n        \/\/ Sunucuya g\u00f6nderilecek Base64 verisi: this.editedImageData\n        console.log('Resim sunucuya g\u00f6nderiliyor:', this.editedImageData.substring(0, 50) + '...');\n        \/\/ Burada bir API \u00e7a\u011fr\u0131s\u0131 yapabilirsiniz (\u00f6rne\u011fin Axios ile)\n        alert('Resim kaydedildi! (Ger\u00e7ek bir sunucu iste\u011fi yap\u0131lmad\u0131)');\n      } else {\n        alert('L\u00fctfen bir resim se\u00e7in veya mevcut resmi kald\u0131r\u0131n.');\n      }\n    },\n  },\n};\n<\/script>\n<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>radius=\"50%\"<\/code> ile dairesel bir resim alan\u0131 olu\u015fturulmu\u015f, <code>prefill<\/code> ile mevcut bir resim g\u00f6sterilmi\u015f ve <code>cropRatio=\"1:1\"<\/code> ile kare k\u0131rpma alan\u0131 zorunlu k\u0131l\u0131nm\u0131\u015ft\u0131r. <code>removable<\/code> prop'u sayesinde kullan\u0131c\u0131 mevcut resmi kald\u0131rabilir.<\/p>\n<h3>Arka Uca Veri G\u00f6nderme ve S\u0131k Kar\u015f\u0131la\u015f\u0131lan Sorunlar<\/h3>\n<p><code>vue-picture-input<\/code> bile\u015feni, se\u00e7ilen resmi <code>@change<\/code> olay\u0131nda Base64 format\u0131nda bir dize olarak sa\u011flar. Bu Base64 dizesini arka uca g\u00f6ndermek ve orada i\u015flemek, resim y\u00fckleme s\u00fcrecinin kritik bir par\u00e7as\u0131d\u0131r.<\/p>\n<h4>Base64 Verisini Sunucuya G\u00f6nderme<\/h4>\n<p>Base64 dizesi, resmin ikili verisini metin tabanl\u0131 bir formatta temsil eder. Bu format, JSON payload'lar\u0131 i\u00e7inde veya form verisi olarak sunucuya kolayca g\u00f6nderilebilir.<\/p>\n<h5>JSON Payload Olarak G\u00f6nderme (\u00d6nerilen)<\/h5>\n<p>Bu y\u00f6ntem, genellikle RESTful API'ler ile kullan\u0131l\u0131r. Vue.js taraf\u0131nda Axios gibi bir HTTP istemcisi kullanarak Base64 dizesini sunucuya g\u00f6nderebilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ Vue bile\u015feninizde saveProfileImage metodu i\u00e7inde\nimport axios from 'axios';\n\n\/\/ ...\nmethods: {\n  async saveProfileImage() {\n    if (this.editedImageData) {\n      try {\n        const response = await axios.post('\/api\/upload-profile-image', {\n          imageData: this.editedImageData, \/\/ Base64 dizesi\n          \/\/ iste\u011fe ba\u011fl\u0131 olarak di\u011fer form verileri\n        });\n        console.log('Sunucu yan\u0131t\u0131:', response.data);\n        alert('Resim ba\u015far\u0131yla y\u00fcklendi!');\n        \/\/ Ba\u015far\u0131l\u0131 y\u00fcklemeden sonra gerekirse UI'\u0131 g\u00fcncelleyin\n      } catch (error) {\n        console.error('Resim y\u00fcklenirken hata olu\u015ftu:', error);\n        alert('Resim y\u00fcklenirken bir sorun olu\u015ftu.');\n      }\n    } else {\n      alert('L\u00fctfen bir resim se\u00e7in.');\n    }\n  },\n}\n\/\/ ...\n<\/code><\/pre>\n<h5>Sunucu Taraf\u0131nda Base64 \u0130\u015fleme (Node.js\/Express \u00d6rne\u011fi)<\/h5>\n<p>Sunucu taraf\u0131nda (\u00f6rne\u011fin Node.js ile Express), gelen Base64 dizesini al\u0131p bir dosya olarak kaydetmeniz gerekir. Genellikle <code>multer<\/code> gibi bir middleware kullanmak yerine, Base64 verisini do\u011frudan i\u015fleyebilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ Express sunucunuzda (server.js veya ilgili rota dosyas\u0131)\nconst express = require('express');\nconst bodyParser = require('body-parser');\nconst fs = require('fs');\nconst path = require('path');\n\nconst app = express();\napp.use(bodyParser.json({ limit: '50mb' })); \/\/ Base64 verisi b\u00fcy\u00fck olabilece\u011fi i\u00e7in limit'i art\u0131r\u0131n\n\napp.post('\/api\/upload-profile-image', (req, res) => {\n  const { imageData } = req.body;\n\n  if (!imageData) {\n    return res.status(400).json({ message: 'Resim verisi eksik.' });\n  }\n\n  \/\/ Base64 dizesinden \"data:image\/jpeg;base64,\" gibi \u00f6neki kald\u0131r\u0131n\n  const base64Data = imageData.replace(\/^data:image\\\/\\w+;base64,\/, '');\n  const buffer = Buffer.from(base64Data, 'base64');\n\n  \/\/ Dosya ad\u0131n\u0131 olu\u015fturun (ger\u00e7ek uygulamada daha benzersiz bir isim kullan\u0131n)\n  const filename = <code>profile-${Date.now()}.png<\/code>; \/\/ Veya imageData'dan dosya t\u00fcr\u00fcn\u00fc \u00e7\u0131kar\u0131n\n  const uploadPath = path.join(__dirname, 'uploads', filename); \/\/ 'uploads' klas\u00f6r\u00fcne kaydedin\n\n  fs.writeFile(uploadPath, buffer, (err) => {\n    if (err) {\n      console.error('Dosya yaz\u0131l\u0131rken hata:', err);\n      return res.status(500).json({ message: 'Resim kaydedilemedi.' });\n    }\n    res.status(200).json({ message: 'Resim ba\u015far\u0131yla y\u00fcklendi.', filePath: <code>\/uploads\/${filename}<\/code> });\n  });\n});\n\n\/\/ Statik dosyalar\u0131 sunmak i\u00e7in (\u00f6rne\u011fin y\u00fcklenen resimler)\napp.use('\/uploads', express.static(path.join(__dirname, 'uploads')));\n\napp.listen(3000, () => console.log('Sunucu 3000 portunda \u00e7al\u0131\u015f\u0131yor.'));\n<\/code><\/pre>\n<h4>Performans ve G\u00fcvenlik \u0130pu\u00e7lar\u0131<\/h4>\n<ul>\n<li><strong>Dosya Boyutu S\u0131n\u0131r\u0131:<\/strong> Hem istemci taraf\u0131nda (<code>size<\/code> prop ile) hem de sunucu taraf\u0131nda dosya boyutu s\u0131n\u0131rlar\u0131n\u0131 uygulay\u0131n. B\u00fcy\u00fck dosyalar, bant geni\u015fli\u011fini t\u00fcketebilir ve sunucuyu yava\u015flatabilir.<\/li>\n<li><strong>Resim S\u0131k\u0131\u015ft\u0131rma\/Boyutland\u0131rma:<\/strong> Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc resimler do\u011frudan y\u00fcklenmek yerine, \u00f6zellikle profil resimleri gibi durumlarda, istemci taraf\u0131nda veya sunucu taraf\u0131nda boyutland\u0131r\u0131lmal\u0131 ve s\u0131k\u0131\u015ft\u0131r\u0131lmal\u0131d\u0131r. Bu, depolama alan\u0131ndan tasarruf sa\u011flar ve y\u00fckleme s\u00fcrelerini k\u0131salt\u0131r. (<code>vue-picture-input<\/code> temel k\u0131rpma sunsa da, daha geli\u015fmi\u015f s\u0131k\u0131\u015ft\u0131rma i\u00e7in farkl\u0131 k\u00fct\u00fcphaneler gerekebilir.)<\/li>\n<li><strong>Dosya T\u00fcr\u00fc Do\u011frulama:<\/strong> <code>accept<\/code> prop'u ile istemci taraf\u0131nda dosya t\u00fcr\u00fcn\u00fc do\u011frulasan\u0131z bile, sunucu taraf\u0131nda da dosyan\u0131n MIME t\u00fcr\u00fcn\u00fc kontrol edin. K\u00f6t\u00fc niyetli kullan\u0131c\u0131lar, dosya uzant\u0131s\u0131n\u0131 de\u011fi\u015ftirerek zararl\u0131 dosyalar y\u00fcklemeye \u00e7al\u0131\u015fabilir.<\/li>\n<li><strong>Benzersiz Dosya Adlar\u0131:<\/strong> Y\u00fcklenen dosyalar i\u00e7in benzersiz adlar olu\u015fturun (\u00f6rn. UUID veya timestamp kullanarak) \u00e7ak\u0131\u015fmalar\u0131 \u00f6nlemek ve g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 azaltmak i\u00e7in.<\/li>\n<li><strong>Depolama:<\/strong> K\u00fc\u00e7\u00fck uygulamalar i\u00e7in sunucu dosya sistemine kaydetmek yeterli olabilirken, b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar i\u00e7in Amazon S3, Google Cloud Storage gibi bulut depolama hizmetleri kullanmak daha uygun olacakt\u0131r.<\/li>\n<\/ul>\n<h4>S\u0131k Kar\u015f\u0131la\u015f\u0131lan Sorunlar<\/h4>\n<ul>\n<li><strong>CORS Hatalar\u0131:<\/strong> E\u011fer Vue.js uygulaman\u0131z farkl\u0131 bir domain veya port \u00fczerinde \u00e7al\u0131\u015f\u0131rken resimleri farkl\u0131 bir sunucuya y\u00fckl\u00fcyorsan\u0131z, CORS (Cross-Origin Resource Sharing) politikalar\u0131 nedeniyle hatalar alabilirsiniz. Sunucu taraf\u0131nda CORS ba\u015fl\u0131klar\u0131n\u0131 do\u011fru \u015fekilde yap\u0131land\u0131rman\u0131z gerekir.<\/li>\n<li><strong>B\u00fcy\u00fck Dosya Boyutlar\u0131:<\/strong> Varsay\u0131lan olarak, Node.js veya di\u011fer sunucu ortamlar\u0131 \u00e7ok b\u00fcy\u00fck JSON payload'lar\u0131n\u0131 kabul etmeyebilir. Sunucunuzda body parser limitlerini art\u0131rman\u0131z gerekebilir (Express \u00f6rne\u011finde <code>limit: '50mb'<\/code>).<\/li>\n<li><strong>Base64 Verisinin Boyutu:<\/strong> Base64 kodlamas\u0131, ikili verinin boyutunu yakla\u015f\u0131k %33 oran\u0131nda art\u0131r\u0131r. Bu, \u00f6zellikle b\u00fcy\u00fck resimler i\u00e7in a\u011f y\u00fck\u00fcn\u00fc art\u0131rabilir. E\u011fer performans kritikse ve resimler \u00e7ok b\u00fcy\u00fckse, alternatif olarak <code>File<\/code> objesini do\u011frudan <code>FormData<\/code> ile g\u00f6ndermek d\u00fc\u015f\u00fcn\u00fclebilir. (<code>vue-picture-input<\/code>, <code>@change<\/code> olay\u0131nda Base64 dizesi yerine <code>File<\/code> objesi d\u00f6nd\u00fcrmez, bu y\u00fczden Base64 i\u015flemek en do\u011frudan yoldur.)<\/li>\n<\/ul>\n<h3>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p><code>vue-picture-input<\/code> bile\u015feni, Vue.js uygulamalar\u0131n\u0131za kolayca ve h\u0131zl\u0131 bir \u015fekilde g\u00fc\u00e7l\u00fc bir resim y\u00fckleme \u00f6zelli\u011fi eklemenizi sa\u011flayan m\u00fckemmel bir ara\u00e7t\u0131r. S\u00fcr\u00fckle-b\u0131rak deste\u011fi, \u00f6nizleme, k\u0131rpma ve do\u011frulama gibi \u00f6zellikleriyle hem geli\u015ftiriciler i\u00e7in i\u015f y\u00fck\u00fcn\u00fc azalt\u0131r hem de kullan\u0131c\u0131lara modern ve sezgisel bir deneyim sunar. Bu rehberde, bile\u015fenin temel kurulumundan geli\u015fmi\u015f konfig\u00fcrasyonuna, arka u\u00e7 entegrasyonu ipu\u00e7lar\u0131ndan s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan sorunlara kadar geni\u015f bir yelpazeyi ele ald\u0131k.<\/p>\n<h4>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h4>\n<ol>\n<li>\n        <strong>S: <code>vue-picture-input<\/code> sadece resimler i\u00e7in mi?<\/strong><br \/>\n        C: Evet, ad\u0131 \u00fczerinde \"picture-input\" oldu\u011fu i\u00e7in \u00f6ncelikli olarak resim dosyalar\u0131n\u0131 (JPEG, PNG, GIF vb.) y\u00fcklemek ve i\u015flemek \u00fczere tasarlanm\u0131\u015ft\u0131r. Video veya di\u011fer dosya t\u00fcrleri i\u00e7in uygun de\u011fildir.\n    <\/li>\n<li>\n        <strong>S: Y\u00fcklenen resmi nas\u0131l sunucuya g\u00f6nderirim?<\/strong><br \/>\n        C: <code>@change<\/code> olay\u0131 ile elde etti\u011finiz Base64 format\u0131ndaki resim verisini, bir HTTP POST iste\u011fi (\u00f6rne\u011fin Axios kullanarak) ile sunucuya g\u00f6nderebilirsiniz. Sunucu taraf\u0131nda bu Base64 dizesini bir dosyaya d\u00f6n\u00fc\u015ft\u00fcr\u00fcp kaydedersiniz.\n    <\/li>\n<li>\n        <strong>S: Resim boyutunu veya tipini nas\u0131l s\u0131n\u0131rlar\u0131m?<\/strong><br \/>\n        C: <code>size<\/code> prop'u ile maksimum dosya boyutunu MB cinsinden (\u00f6rn. <code>:size=\"5\"<\/code> for 5MB) ve <code>accept<\/code> prop'u ile kabul edilecek dosya t\u00fcrlerini (\u00f6rn. <code>accept=\"image\/jpeg,image\/png\"<\/code>) belirleyebilirsiniz.\n    <\/li>\n<li>\n        <strong>S: Mevcut bir resmi nas\u0131l g\u00f6steririm?<\/strong><br \/>\n        C: <code>prefill<\/code> prop'una mevcut resmin URL'sini veya Base64 dizesini sa\u011flayarak bile\u015fenin ba\u015flang\u0131\u00e7ta bu resmi g\u00f6r\u00fcnt\u00fclemesini sa\u011flayabilirsiniz (\u00f6rn. <code>:prefill=\"user.profileImageUrl\"<\/code>).\n    <\/li>\n<li>\n        <strong>S: K\u0131rpma \u00f6zelli\u011fini nas\u0131l kullan\u0131r\u0131m?<\/strong><br \/>\n        C: <code>crop<\/code> prop'unu <code>true<\/code> olarak ayarlayarak k\u0131rpma \u00f6zelli\u011fini etkinle\u015ftirebilirsiniz (\u00f6rn. <code>:crop=\"true\"<\/code>). K\u0131rpma oran\u0131n\u0131 da <code>cropRatio<\/code> prop'u ile (\u00f6rn. <code>cropRatio=\"1:1\"<\/code>) belirleyebilirsiniz.\n    <\/li>\n<li>\n        <strong>S: Bile\u015fenin stilini nas\u0131l de\u011fi\u015ftiririm?<\/strong><br \/>\n        C: Bile\u015fenin varsay\u0131lan stillerini ge\u00e7ersiz k\u0131lmak i\u00e7in kendi CSS'inizi yazabilirsiniz. Ayr\u0131ca, <code>plain<\/code> prop'unu <code>true<\/code> yaparak varsay\u0131lan stilin \u00e7o\u011funu kald\u0131rabilir ve tamamen kendi stilinizi uygulayabilirsiniz. <code>buttonClass<\/code> gibi proplar da butonlara \u00f6zel s\u0131n\u0131flar eklemenizi sa\u011flar.\n    <\/li>\n<\/ol>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm\nModern web uygulamalar\u0131, kullan\u0131c\u0131lar\u0131n profil resimleri, \u00fcr\u00fc","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":[1402],"tags":[],"class_list":{"0":"post-36890","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-vue","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>Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\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\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm\" \/>\n<meta property=\"og:description\" content=\"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm Modern web uygulamalar\u0131, kullan\u0131c\u0131lar\u0131n profil resimleri, \u00fcr\u00fc\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-24T11:41:50+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=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm\",\"datePublished\":\"2025-12-24T11:41:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/\"},\"wordCount\":1977,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Vue\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/\",\"name\":\"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-24T11:41:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm\"}]},{\"@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":"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/","og_locale":"tr_TR","og_type":"article","og_title":"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm","og_description":"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm Modern web uygulamalar\u0131, kullan\u0131c\u0131lar\u0131n profil resimleri, \u00fcr\u00fc","og_url":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-24T11:41:50+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm","datePublished":"2025-12-24T11:41:50+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/"},"wordCount":1977,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Vue"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/","url":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/","name":"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-24T11:41:50+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinizda-resim-yukleme-vue-picture-input-ile-kolay-cozum\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue.js Uygulamalar\u0131n\u0131zda Resim Y\u00fckleme: vue-picture-input ile Kolay \u00c7\u00f6z\u00fcm"}]},{"@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\/36890","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=36890"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36890\/revisions"}],"predecessor-version":[{"id":36891,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36890\/revisions\/36891"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=36890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=36890"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=36890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}