fix: Use axios to upload image for detecting.

src/components/ImageForm.vue

@@ -6,31 +6,57 @@
         <p class="lead text-muted">
           Know more about your skin, before it's too late!
         </p>
-        <p>
-          <button
-            type="button"
-            class="btn btn-primary my-2"
-            @click.prevent="onUploadClicked"
-          >
-            Upload a Image
-          </button>
-        </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: {
-    onUploadClicked() {
-      const detectData = {
-        diseaseName: "Test",
-        trustworthiness: 0.12,
-        detectImageUrl: "https://www.baidu.com",
+    _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" },
       };
 
-      this.$emit("detect-responsed", detectData);
+      axios.post(this._uploadImgUrl(), formData, config).then((res) => {
+        console.log(res.status);
+      });
     },
   },
 };