121 lines
3.2 KiB
Vue
121 lines
3.2 KiB
Vue
<template>
|
|
<div
|
|
style="background: #b2c573"
|
|
class="mt-5 d-flex justify-center parent-container py-10"
|
|
>
|
|
<!-- <input
|
|
type="file"
|
|
@change="onFileChanged($event)"
|
|
accept="image/*"
|
|
capture
|
|
/>
|
|
<button @click="uploadImage()">Upload</button> -->
|
|
<v-row align="center" justify="center">
|
|
<v-col cols="12" md="8">
|
|
<v-card color="#4C884C" class="pa-5 text-center h-100" elevated>
|
|
<div class="text-sub text-left">
|
|
<v-icon icon="mdi-plus-box-multiple"></v-icon>
|
|
เพิ่มรูปภาพ
|
|
</div>
|
|
<!-- {{url}} -->
|
|
<v-avatar size="200" color="grey" class="elevation-3">
|
|
<v-img :src="url" v-if="url"></v-img>
|
|
<v-icon dark v-else size="80"> mdi-account </v-icon>
|
|
</v-avatar>
|
|
|
|
<v-file-input
|
|
label="แนบรูปภาพ"
|
|
accept="image/png, image/jpeg, image/bmp"
|
|
placeholder="แนบรูปภาพไฟล์ png/jpeg/jpg"
|
|
prepend-inner-icon="mdi-camera"
|
|
prepend-icon=""
|
|
variant="solo-filled"
|
|
class="mt-5"
|
|
v-model="image"
|
|
@change="onFileChanged($event)"
|
|
></v-file-input>
|
|
<v-btn
|
|
color="#DD6C31"
|
|
class="mt-4"
|
|
height="40"
|
|
@click="uploadImage()"
|
|
:disabled="image == null"
|
|
>
|
|
<span class="text-sub2">upload</span>
|
|
</v-btn>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { client } from "@/utils/trpc";
|
|
import { createFormData } from "@/utils/fileUpload";
|
|
export default {
|
|
watch: {
|
|
image(val) {
|
|
console.log(val);
|
|
if (val == undefined) {
|
|
this.url = null;
|
|
this.image = null;
|
|
}
|
|
},
|
|
},
|
|
data: () => ({
|
|
file: null,
|
|
url: null,
|
|
image: null,
|
|
}),
|
|
methods: {
|
|
Preview_image() {
|
|
// console.log('this.image', this.image)
|
|
if (this.image && this.image !== null) {
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
console.log(event.target.result);
|
|
this.url = event.target.result;
|
|
};
|
|
reader.readAsDataURL(this.image);
|
|
console.log();
|
|
} else {
|
|
this.url = null;
|
|
}
|
|
},
|
|
onFileChanged(event) {
|
|
const file = event.target.files[0];
|
|
this.file = file;
|
|
if (this.file && this.file !== null) {
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
console.log(event.target.result);
|
|
this.url = event.target.result;
|
|
};
|
|
reader.readAsDataURL(this.file);
|
|
console.log();
|
|
} else {
|
|
this.url = null;
|
|
}
|
|
},
|
|
|
|
async uploadImage() {
|
|
if (!this.file) {
|
|
return;
|
|
}
|
|
let request = await client.user.requestChangeImage.mutate({
|
|
imageName: this.file.name,
|
|
contentType: this.file.type,
|
|
});
|
|
let formData = createFormData(request, this.file);
|
|
await fetch(request.postURL, {
|
|
method: "POST",
|
|
body: formData,
|
|
}).then(() => {
|
|
client.user.confirmChangeImage.mutate();
|
|
});
|
|
console.log("done");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style></style>
|