49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<script setup>
|
|
|
|
const image = useState('carImage',() => {
|
|
return {
|
|
preview:null,
|
|
image:null
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['changeInput']);
|
|
|
|
const props = defineProps({
|
|
title:String,
|
|
name:String
|
|
});
|
|
|
|
const onImageUpload = (event) => {
|
|
const input = event.target;
|
|
if(input.files){
|
|
const reader= new FileReader();
|
|
reader.onload = (e) => {
|
|
image.value.preview = e.target.result;
|
|
};
|
|
image.value.image = input.files[0];
|
|
reader.readAsDataURL(input.files[0]);
|
|
emit("changeInput",input.files[0],"image");
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col-md5 offset-md-1 mt-2 w-[100%]">
|
|
<label class="text-cyan-500 mb-q text-sm">{{ title }}</label>
|
|
<form class="mt-2">
|
|
<div class="form-group">
|
|
<div class="relative">
|
|
<input class="opacity-0 absolute cursor-pointer"
|
|
type="file" accept="image/*"
|
|
@change="onImageUpload"
|
|
/>
|
|
<span class="cursor-pointer">Browse file</span>
|
|
</div>
|
|
<div class="border p-2 mt-3 w-56" v-if="image.preview">
|
|
<img :src="image.preview" class="img-fluid" alt="">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template> |