added test image upload

src/router/index.js

@@ -4,6 +4,7 @@ import CheckSurvey from "@/views/CheckSurvey.vue";
 import QuestionList from "@/views/QuestionList.vue";
 import RegisterForm from "@/views/RegisterForm.vue";
 import SearchUser from "@/views/SearchUser.vue";
+import UploadImage from "@/views/UploadImage.vue";
 const routes = [
   {
     path: "/",
@@ -26,6 +27,10 @@ const routes = [
     path: "/search",
     component: SearchUser,
   },
+  {
+    path: "/upload",
+    component: UploadImage,
+  },
 ];
 
 const router = createRouter({
@@ -33,4 +38,5 @@ const router = createRouter({
   routes,
 });
 
-export default router;
+export default router;
+

src/utils/fileUpload.js

@@ -0,0 +1,8 @@
+export function createFormData(request, file) {
+  const formData = new FormData();
+  Object.entries(request.formData).forEach(([key, value]) => {
+    formData.append(key, value);
+  });
+  formData.append("file", file, file.name);
+  return formData;
+}

src/utils/trpc.js

@@ -5,6 +5,12 @@ export const client = createTRPCProxyClient({
   links: [
     httpBatchLink({
       url: CONFIG.api_url,
+      headers: () => {
+        let token = localStorage.getItem("token");
+        return {
+          Authorization: token ? `Bearer ${token}` : "",
+        };
+      },
     }),
   ],
 });

src/views/UploadImage.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <input
+      type="file"
+      @change="onFileChanged($event)"
+      accept="image/*"
+      capture
+    />
+    <button @click="uploadImage()">Upload</button>
+  </div>
+</template>
+<script>
+import { client } from "@/utils/trpc";
+import { createFormData } from "@/utils/fileUpload";
+export default {
+  data: () => ({
+    file: null,
+  }),
+  methods: {
+    onFileChanged(event) {
+      const file = event.target.files[0];
+      this.file = file;
+    },
+
+    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>