回答編集履歴

修正

2019/12/06 17:02

投稿

スコア1752

test CHANGED Viewed

@@ -30,6 +30,8 @@
 ```Java
+@CrossOrigin(origins = "http://localhost:3000")
 @PostMapping(value = "/upload", produces = MediaType.APPLICATION_JSON_VALUE)
 public ResponseEntity<Map<String, String>> fileUpload(@RequestParam("name") String name,
@@ -118,7 +120,7 @@
-fileupload.vue
+pages/fileupload.vue
@@ -192,7 +194,7 @@
-fileupload.js
+store/fileupload.js
@@ -212,12 +214,16 @@
     const file = (event.target.files || event.dataTransfer.files)[0]
     const formData = new FormData()
     formData.append('name', file.name)
     formData.append('file', file)
     const response = await this.$axios
       .post('http://localhost:8080/upload', formData, {
@@ -226,42 +232,48 @@
       })
+      .then((response) => {
+        context.commit('add', {
+          name: response.data.name,
+          image: response.data.base64
+        })
+      })
       .catch((error) => {
         return error.response
       })
+    return response
+  }
+}
-    context.commit('add', {
+export const mutations = {
+  add(state, payload) {
+    state.files.push({
-      name: response.data.name,
+      name: payload.name,
-      image: response.data.base64
+      image: payload.image
     })
-    return response
-  }
+  }
-}
+}
-export const mutations = {
-  add(state, payload) {
-    state.files.push({
-      name: payload.name,
-      image: payload.image
-    })
-  }
-}
-```
+```

修正

2019/12/06 17:02

投稿

スコア1752

test CHANGED Viewed

@@ -154,7 +154,7 @@
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
@@ -172,33 +172,17 @@
   methods: {
-    uploadFile(e) {
+    ...mapActions({
-      const file = (e.target.files || e.dataTransfer.files)[0]
-      this.$store
-        .dispatch('fileupload/uploadFile', {
+      uploadFile: 'fileupload/uploadFile'
-          name: file.name,
-          file
-        })
+    })
-        .then((res) => {
-          console.log('response', res)
-        })
-    }
+  }
-  }
+}
-}
+</script>
 ```
@@ -224,13 +208,15 @@
 export const actions = {
-  async uploadFile(context, payload) {
+  async uploadFile(context, event) {
+    const file = (event.target.files || event.dataTransfer.files)[0]
     const formData = new FormData()
-    formData.append('name', payload.name)
+    formData.append('name', file.name)
-    formData.append('file', payload.file)
+    formData.append('file', file)
     const response = await this.$axios
@@ -278,6 +264,4 @@
 }
-```
+```

修正

2019/12/06 16:47

投稿

スコア1752

test CHANGED Viewed

@@ -122,7 +122,7 @@
-```
+```Vue
 <template>
@@ -190,13 +190,7 @@
         .then((res) => {
-          this.$store.commit('fileupload/add', {
+          console.log('response', res)
-            name: res.data.name,
-            image: res.data.base64
-          })
         })
@@ -218,7 +212,7 @@
-```
+```JavaScript
 export const state = () => ({
@@ -252,6 +246,14 @@
       })
+    context.commit('add', {
+      name: response.data.name,
+      image: response.data.base64
+    })
     return response
   }