{"id":30956,"date":"2025-10-04T00:41:32","date_gmt":"2025-10-03T21:41:32","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30956"},"modified":"2025-10-04T00:41:32","modified_gmt":"2025-10-03T21:41:32","slug":"vue-js-ile-filereader-api-kullanarak-bir-dosya-okuyucu-bileseni-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-filereader-api-kullanarak-bir-dosya-okuyucu-bileseni-olusturma\/","title":{"rendered":"Vue.js ile FileReader API Kullanarak Bir Dosya Okuyucu Bile\u015feni Olu\u015fturma"},"content":{"rendered":"

<\/p>\n

Vue.js ile FileReader API Kullanarak Bir Dosya Okuyucu Bile\u015feni Olu\u015fturma<\/h2>\n

Giri\u015f<\/h2>\n
Web uygulamalar\u0131 g\u00fcn\u00fcm\u00fczde sadece sunucu taraf\u0131nda i\u015flenen verilerle de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n yerel sistemlerinden y\u00fckledi\u011fi dosyalarla da etkile\u015fime girmektedir. Bir resim y\u00fckleme, bir metin belgesini \u00f6nizleme veya bir CSV dosyas\u0131n\u0131 istemci taraf\u0131nda i\u015fleme gibi senaryolar, modern web uygulamalar\u0131 i\u00e7in temel gereksinimler haline gelmi\u015ftir. JavaScript’in yerle\u015fik `FileReader<\/code> API’si, bu t\u00fcr dosya okuma i\u015flemlerini taray\u0131c\u0131 ortam\u0131nda kolayca ger\u00e7ekle\u015ftirmemizi sa\u011flar. Vue.js gibi reaktif ve bile\u015fen tabanl\u0131 bir framework ile FileReader<\/code> API’sini birle\u015ftirmek, kullan\u0131c\u0131 dostu ve y\u00f6netilebilir dosya okuyucu bile\u015fenleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir y\u00f6ntem sunar.<\/p>\n`
Bu makalede, FileReader<\/code> API’sinin temel prensiplerini, Vue.js ile nas\u0131l entegre edilece\u011fini ve farkl\u0131 dosya tiplerini okumak i\u00e7in nas\u0131l kullan\u0131labilece\u011fini ad\u0131m ad\u0131m inceleyece\u011fiz. Amac\u0131m\u0131z, kullan\u0131c\u0131lar\u0131n yerel dosyalar\u0131n\u0131 se\u00e7ip i\u00e7eriklerini web uygulaman\u0131zda g\u00f6r\u00fcnt\u00fclemelerine veya i\u015flemelerine olanak tan\u0131yan, yeniden kullan\u0131labilir bir Vue..js bile\u015feni olu\u015fturmakt\u0131r. Makale boyunca, teorik bilgileri pratik kod \u00f6rnekleriyle destekleyerek, kendi dosya okuyucu bile\u015fenlerinizi geli\u015ftirmeniz i\u00e7in kapsaml\u0131 bir rehber sunaca\u011f\u0131z.<\/p>\n

Temel Kavramlar<\/h2>\nDosya okuyucu bile\u015fenimizi geli\u015ftirmeye ba\u015flamadan \u00f6nce, temel te\u015fkil eden FileReader<\/code> API’si ve Vue.js’in ilgili y\u00f6nlerini anlamak \u00f6nemlidir.<\/p>\n
FileReader API Nedir?<\/h3>\nFileReader<\/code> API’si, web uygulamalar\u0131n\u0131n kullan\u0131c\u0131n\u0131n bilgisayar\u0131ndaki dosyalar\u0131n veya ham veri arabelleklerinin (Blob’lar) i\u00e7eri\u011fini asenkron olarak okumas\u0131n\u0131 sa\u011flayan bir JavaScript aray\u00fcz\u00fcd\u00fcr. Bu API, \u00f6zellikle <\/code> elementi arac\u0131l\u0131\u011f\u0131yla se\u00e7ilen dosyalar\u0131n i\u00e7eri\u011fini okumak i\u00e7in kullan\u0131l\u0131r. G\u00fcvenlik nedeniyle, FileReader<\/code> API’si kullan\u0131c\u0131n\u0131n izni olmadan dosya sistemine do\u011frudan eri\u015femez; dosya okuma i\u015flemi yaln\u0131zca kullan\u0131c\u0131 taraf\u0131ndan a\u00e7\u0131k\u00e7a se\u00e7ilen dosyalar \u00fczerinde ger\u00e7ekle\u015ftirilebilir.<\/p>\n
FileReader<\/code> nesnesinin ba\u015fl\u0131ca \u00f6zellikleri \u015funlard\u0131r:
\n*   Asenkron \u00c7al\u0131\u015fma:<\/strong> Dosya okuma i\u015flemleri uzun s\u00fcrebilece\u011finden, taray\u0131c\u0131 aray\u00fcz\u00fcn\u00fc kilitlememek i\u00e7in asenkron olarak \u00e7al\u0131\u015f\u0131r. Okuma i\u015flemi tamamland\u0131\u011f\u0131nda veya bir hata olu\u015ftu\u011funda belirli olaylar tetiklenir.
\n*   Blob ve File Nesneleri:<\/strong> FileReader<\/code> do\u011frudan bir File<\/code> nesnesi (ki bu asl\u0131nda \u00f6zel bir Blob<\/code> t\u00fcr\u00fcd\u00fcr) veya genel bir Blob<\/code> nesnesi \u00fczerinde \u00e7al\u0131\u015f\u0131r. File<\/code> nesneleri, kullan\u0131c\u0131n\u0131n <\/code> arac\u0131l\u0131\u011f\u0131yla se\u00e7ti\u011fi dosyalara kar\u015f\u0131l\u0131k gelir ve name<\/code>, size<\/code>, type<\/code> gibi ek \u00f6zelliklere sahiptir.
\n*   Okuma Metotlar\u0131:<\/strong> FileReader<\/code>‘\u0131n i\u00e7eri\u011fi farkl\u0131 formatlarda okumak i\u00e7in \u00e7e\u015fitli metotlar\u0131 vard\u0131r:
\n    *   readAsText(file, [encoding])<\/code>: Dosyan\u0131n i\u00e7eri\u011fini metin olarak okur. Genellikle .txt<\/code>, .json<\/code>, .csv<\/code> gibi metin tabanl\u0131 dosyalar i\u00e7in kullan\u0131l\u0131r. \u0130ste\u011fe ba\u011fl\u0131 olarak bir karakter kodlamas\u0131 (\u00f6rne\u011fin, ‘UTF-8’) belirtebilirsiniz.
\n    *   readAsDataURL(file)<\/code>: Dosyan\u0131n i\u00e7eri\u011fini bir Base64 kodlu veri URL’si olarak okur. Bu format, resimler veya di\u011fer ikili veriler i\u00e7in yayg\u0131n olarak kullan\u0131l\u0131r ve do\u011frudan <\/code> etiketinin src<\/code> \u00f6zniteli\u011finde veya CSS background-image<\/code> \u00f6zelli\u011finde kullan\u0131labilir.
\n    *   readAsArrayBuffer(file)<\/code>: Dosyan\u0131n i\u00e7eri\u011fini bir ArrayBuffer<\/code> olarak okur. Bu, ikili verileri (\u00f6rne\u011fin, PDF, ses, video dosyalar\u0131) daha d\u00fc\u015f\u00fck seviyede i\u015flemek gerekti\u011finde kullan\u0131\u015fl\u0131d\u0131r.
\n    *   readAsBinaryString(file)<\/code>: Dosyan\u0131n i\u00e7eri\u011fini ham ikili dize olarak okur. Bu metot eski ve genellikle readAsArrayBuffer<\/code> yerine kullan\u0131lmas\u0131 \u00f6nerilmez.
\n*   Olaylar:<\/strong> Okuma i\u015fleminin farkl\u0131 a\u015famalar\u0131n\u0131 izlemek i\u00e7in \u00e7e\u015fitli olaylar mevcuttur:
\n    *   onloadstart<\/code>: Okuma i\u015flemi ba\u015flad\u0131\u011f\u0131nda tetiklenir.
\n    *   onprogress<\/code>: Okuma i\u015flemi devam ederken periyodik olarak tetiklenir, ilerleme durumunu izlemek i\u00e7in kullan\u0131labilir.
\n    *   onload<\/code>: Okuma i\u015flemi ba\u015far\u0131yla tamamland\u0131\u011f\u0131nda tetiklenir. Okunan i\u00e7erik reader.result<\/code> \u00f6zelli\u011finde bulunur.
\n    *   onabort<\/code>: Okuma i\u015flemi reader.abort()<\/code> metoduyla iptal edildi\u011finde tetiklenir.
\n    *   onerror<\/code>: Okuma i\u015flemi s\u0131ras\u0131nda bir hata olu\u015ftu\u011funda tetiklenir. Hata bilgisi reader.error<\/code> \u00f6zelli\u011finde bulunur.
\n    *   onloadend<\/code>: Okuma i\u015flemi (ba\u015far\u0131l\u0131 veya hatal\u0131) tamamland\u0131\u011f\u0131nda tetiklenir.<\/p>\n
Vue.js’e Giri\u015f<\/h3>\nVue.js, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in a\u015famal\u0131 olarak benimsenebilir bir JavaScript framework’\u00fcd\u00fcr. Temel \u00f6zellikleri aras\u0131nda reaktif veri ba\u011flama, bile\u015fen tabanl\u0131 mimari ve sanal DOM kullan\u0131m\u0131 bulunur. FileReader<\/code> API’sini Vue.js ile kullan\u0131rken, Vue’nun reaktif veri sistemi sayesinde dosya okuma durumunu, ilerlemesini ve sonucunu kolayca y\u00f6netebilir ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc buna g\u00f6re g\u00fcncelleyebilirsiniz. Bile\u015fen tabanl\u0131 yakla\u015f\u0131m, dosya okuyucu mant\u0131\u011f\u0131n\u0131 izole edilmi\u015f, yeniden kullan\u0131labilir bir birim olarak paketlememizi sa\u011flar.<\/p>\n
Vue.js Projesi Kurulumu<\/h2>\n\u0130lk ad\u0131m olarak, yeni bir Vue.js projesi olu\u015ftural\u0131m. Vue CLI (Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc) bu i\u015flemi olduk\u00e7a kolayla\u015ft\u0131r\u0131r. E\u011fer Vue CLI y\u00fckl\u00fc de\u011filse, a\u015fa\u011f\u0131daki komutla global olarak y\u00fckleyebilirsiniz:<\/p>\n
npm install -g @vue\/cli\nVeya<\/h2>\nyarn global add @vue\/cli<\/code><\/pre>\nArd\u0131ndan, yeni bir Vue projesi olu\u015ftural\u0131m:<\/p>\n
vue create file-reader-app<\/code><\/pre>\nBu komut size baz\u0131 se\u00e7enekler sunacakt\u0131r (varsay\u0131lan\u0131 se\u00e7mek genellikle yeterlidir). Proje olu\u015fturulduktan sonra, proje dizinine gidin:<\/p>\n
cd file-reader-app<\/code><\/pre>\nVe projeyi ba\u015flat\u0131n:<\/p>\n
npm run serve\nVeya<\/h2>\nyarn serve<\/code><\/pre>\nBu, uygulaman\u0131z\u0131 yerel bir sunucuda (genellikle http:\/\/localhost:8080<\/code>) \u00e7al\u0131\u015ft\u0131racakt\u0131r.<\/p>\n
Dosya Okuyucu Bile\u015feni Tasar\u0131m\u0131<\/h2>\n\u015eimdi dosya okuma i\u015flevselli\u011fini i\u00e7erecek Vue bile\u015fenini tasarlayal\u0131m. src\/components<\/code> klas\u00f6r\u00fcnde FileReaderComponent.vue<\/code> ad\u0131nda yeni bir dosya olu\u015ftural\u0131m.<\/p>\n
Bile\u015fen Yap\u0131s\u0131<\/h3>\nVue bile\u015fenleri genellikle \u00fc\u00e7 ana b\u00f6l\u00fcmden olu\u015fur:
\n*

Vue.js ile FileReader API Kullanarak Bir Dosya Okuyucu Bile\u015feni Olu\u015fturma<\/h2>\n

Veya<\/h2>\nyarn serve<\/code><\/pre>\n
Bu, uygulaman\u0131z\u0131 yerel bir sunucuda (genellikle `http:\/\/localhost:8080<\/code>) \u00e7al\u0131\u015ft\u0131racakt\u0131r.<\/p>\n`

`Bile\u015fen Yap\u0131s\u0131<\/h3>\nVue bile\u015fenleri genellikle \u00fc\u00e7 ana b\u00f6l\u00fcmden olu\u015fur: \n*`