66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
<template>
|
|
<section class="py-5 text-center container">
|
|
<div class="row py-lg-5">
|
|
<div class="col-lg-6 col-md-8 mx-auto">
|
|
<h1 class="fw-light">Skin Disease Detection</h1>
|
|
<p class="lead text-muted">
|
|
Know more about your skin, before it's too late!
|
|
</p>
|
|
<form enctype="multipart/form-data" style="display: none">
|
|
<input
|
|
ref="skinImgInput"
|
|
accept="image/*"
|
|
type="file"
|
|
@change="onImgChanged"
|
|
/>
|
|
</form>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary my-2"
|
|
@click="onPickClicked"
|
|
>
|
|
Pick a Image
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedImgFile: "",
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
_uploadImgUrl() {
|
|
return process.env.VUE_APP_API_ROOT + "/DiseaseDetect";
|
|
},
|
|
onPickClicked() {
|
|
this.$refs.skinImgInput.click();
|
|
},
|
|
onImgChanged(e) {
|
|
const f = e.target.files[0];
|
|
this.selectedImgFile = f;
|
|
|
|
const formData = new FormData();
|
|
formData.append("image", f);
|
|
|
|
const config = {
|
|
headers: { "Content-Type": "multipart/form-data" },
|
|
};
|
|
|
|
axios.post(this._uploadImgUrl(), formData, config).then((res) => {
|
|
console.log(res.status);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|