Selam :).
Bugün öğreneceklerimiz:
File upload işlemi yapacağız, yüklediğimiz dosyanın boyutunu hesaplatıp ekranda göstereceğiz, boş dosya yüklenmesini engelleyeceğiz. Yüklediğimiz dosyayı ve eklediğimiz diğer dataları axios kullanarak servise göndereceğiz.
Öncelikle terminalde vue add vuetify komutunu koşalım. Sonrasında npm install axios komutunu da koşalım.
File upload işlemi için Vuetify’ın v-file-input tagini kullanalım. V-input-file hakkında bilgi almak için tıklayınız.
<v-file-input
ref="file"
id="file"
type="file"
class="mx-10"
color="blue-grey"
prepend-icon="mdi-cloud-upload"
v-on:change="handleFileUpload($event)"
:rules="rules"
accept="audio/wav"
label="Dosya Yükle"
chips
hint="Yüklenecek dosya wav türünde olmalıdır.">
</v-file-input>ref: Clear işlemini yapabilmek içi kullanacağız.
type: Type file seçildiğinden dosya yüklememize izin verir.
v-on:change: Dosya yüklendiğinde dosya boyutunu hesaplayabilmek için handleFileUpload methodunu yazacağız.
rules: Dosya yüklerken istediğimiz kurallar için kullanacağız.
accept: Hangi türde dosyalar yükleyebileceğimizi belirtir.
Aynı zamanda Dosya İsmi ve Dosya Boyutu içinde v-text-field, kaydetmek içinde v-btn ekliyorum ve biraz düzenleme yapıyorum.
<template>
<v-app>
<v-card max-width="90%" outlined class="mx-10">
<h1>Dosya Ekle</h1>
<v-text-field id="file_name" ref="file_name" v-model="file_name" class="mx-10" label="Dosya İsmi"
:rules="[() => !!file_name || 'Dosya ismi boş olamaz!']">
</v-text-field>
<v-file-input
ref="file"
id="file"
type="file"
class="mx-10"
color="blue-grey"
prepend-icon="mdi-cloud-upload"
v-on:change="handleFileUpload($event)"
:rules="rules"
accept="audio/wav"
label="Dosya Yükle"
chips
hint="Yüklenecek dosya wav türünde olmalıdır.">
</v-file-input>
<v-text-field id="file_size" v-model="file_size" class="mx-10" label="Dosya Boyutu"></v-text-field>
<br class="mx-auto">
<v-btn
color="success"
class="mx-10"
@click="submitFile()">
Kaydet
<v-icon right dark>mdi-save</v-icon>
</v-btn>
<br>
</v-card>
</v-app>
</template>Methodların açıklamaları yanlarında yazmaktadır.
<script>
import axios from "axios";
export default {
data: () => ({
rules: [
value => !value || value.size > 0 || 'Dosya boş olamaz!',
//dosya yüklerken rule ekleyerek boş dosya yüklenememesini sağlıyoruz.
],
file: '',
file_name:'',
file_size: '',
posts: [],
}),
methods: {
handleFileUpload(e) { //Dosya boyutunu setliyor.
this.file = e;
this.file_size = this.convertBytes(e.size);
},
convertBytes(x) { //Dosya boyutunu hesaplıyor.
const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
let l = 0, n = parseInt(x, 10) || 0;
while (n >= 1024 && ++l) {
n = n / 1024;
}
return (n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l]);
},
submitFile() {
let formData = new FormData(); //Servisimin requesti multipart/form-data olduğu için FormData oluşturdum.
formData.append("file", this.file);
let data = {
"fileName": this.file_name,
"fileSize": this.file_size,
};
data = JSON.stringify(data);
const blob = new Blob([data], {type: 'application/json'})
formData.append("data", blob);
axios.post(
"localhost:9599/file/create?", //url
formData,
{
headers: {
'Content-Type': 'multipart/form-data',
}
}
)
.then(response => {
this.clearItems();
console.log("success: " + response.data.message);
})
.catch(e => {
console.log("error : " + e);
})
},
clearItems() { //Kaydedildikten sonra nesnelerin içini boşaltır.
this.$refs.file_name.reset();
this.$refs.file.value = null;
this.file_size = "";
},
}
}
</script>Bir FormData nesnesi oluşturarak bu nesneye dosyamızı ve datamızı ekliyoruz ve servise direk FormData nesnesini gönderiyoruz.
Kodların tamamına Github‘dan ulaşabilirsiniz.