回答編集履歴
3
修正
answer
CHANGED
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
アップロードされた画像ファイルをBase64エンコードしてレスポンスします。
|
|
15
15
|
|
|
16
16
|
```Java
|
|
17
|
+
@CrossOrigin(origins = "http://localhost:3000")
|
|
17
18
|
@PostMapping(value = "/upload", produces = MediaType.APPLICATION_JSON_VALUE)
|
|
18
19
|
public ResponseEntity<Map<String, String>> fileUpload(@RequestParam("name") String name,
|
|
19
20
|
@RequestParam("file") MultipartFile uploadFile) throws Exception {
|
|
@@ -58,7 +59,7 @@
|
|
|
58
59
|
|
|
59
60
|
###### コンポーネント
|
|
60
61
|
|
|
61
|
-
fileupload.vue
|
|
62
|
+
pages/fileupload.vue
|
|
62
63
|
|
|
63
64
|
```Vue
|
|
64
65
|
<template>
|
|
@@ -95,7 +96,7 @@
|
|
|
95
96
|
|
|
96
97
|
###### vuex
|
|
97
98
|
|
|
98
|
-
fileupload.js
|
|
99
|
+
store/fileupload.js
|
|
99
100
|
|
|
100
101
|
```JavaScript
|
|
101
102
|
export const state = () => ({
|
|
@@ -105,20 +106,25 @@
|
|
|
105
106
|
export const actions = {
|
|
106
107
|
async uploadFile(context, event) {
|
|
107
108
|
const file = (event.target.files || event.dataTransfer.files)[0]
|
|
109
|
+
|
|
108
110
|
const formData = new FormData()
|
|
109
111
|
formData.append('name', file.name)
|
|
110
112
|
formData.append('file', file)
|
|
113
|
+
|
|
111
114
|
const response = await this.$axios
|
|
112
115
|
.post('http://localhost:8080/upload', formData, {
|
|
113
116
|
headers: { 'Content-Type': 'multipart/form-data' }
|
|
114
117
|
})
|
|
118
|
+
.then((response) => {
|
|
119
|
+
context.commit('add', {
|
|
120
|
+
name: response.data.name,
|
|
121
|
+
image: response.data.base64
|
|
122
|
+
})
|
|
123
|
+
})
|
|
115
124
|
.catch((error) => {
|
|
116
125
|
return error.response
|
|
117
126
|
})
|
|
118
|
-
|
|
127
|
+
|
|
119
|
-
name: response.data.name,
|
|
120
|
-
image: response.data.base64
|
|
121
|
-
})
|
|
122
128
|
return response
|
|
123
129
|
}
|
|
124
130
|
}
|
2
修正
answer
CHANGED
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
</template>
|
|
77
77
|
|
|
78
78
|
<script>
|
|
79
|
-
import { mapState } from 'vuex'
|
|
79
|
+
import { mapState, mapActions } from 'vuex'
|
|
80
80
|
|
|
81
81
|
export default {
|
|
82
82
|
computed: {
|
|
@@ -85,20 +85,12 @@
|
|
|
85
85
|
})
|
|
86
86
|
},
|
|
87
87
|
methods: {
|
|
88
|
-
|
|
88
|
+
...mapActions({
|
|
89
|
-
const file = (e.target.files || e.dataTransfer.files)[0]
|
|
90
|
-
|
|
91
|
-
this.$store
|
|
92
|
-
|
|
89
|
+
uploadFile: 'fileupload/uploadFile'
|
|
93
|
-
name: file.name,
|
|
94
|
-
file
|
|
95
|
-
|
|
90
|
+
})
|
|
96
|
-
.then((res) => {
|
|
97
|
-
console.log('response', res)
|
|
98
|
-
})
|
|
99
|
-
}
|
|
100
91
|
}
|
|
101
92
|
}
|
|
93
|
+
</script>
|
|
102
94
|
```
|
|
103
95
|
|
|
104
96
|
###### vuex
|
|
@@ -111,10 +103,11 @@
|
|
|
111
103
|
})
|
|
112
104
|
|
|
113
105
|
export const actions = {
|
|
114
|
-
async uploadFile(context,
|
|
106
|
+
async uploadFile(context, event) {
|
|
107
|
+
const file = (event.target.files || event.dataTransfer.files)[0]
|
|
115
108
|
const formData = new FormData()
|
|
116
|
-
formData.append('name',
|
|
109
|
+
formData.append('name', file.name)
|
|
117
|
-
formData.append('file',
|
|
110
|
+
formData.append('file', file)
|
|
118
111
|
const response = await this.$axios
|
|
119
112
|
.post('http://localhost:8080/upload', formData, {
|
|
120
113
|
headers: { 'Content-Type': 'multipart/form-data' }
|
|
@@ -138,5 +131,4 @@
|
|
|
138
131
|
})
|
|
139
132
|
}
|
|
140
133
|
}
|
|
141
|
-
|
|
142
134
|
```
|
1
修正
answer
CHANGED
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
|
|
61
61
|
fileupload.vue
|
|
62
62
|
|
|
63
|
-
```
|
|
63
|
+
```Vue
|
|
64
64
|
<template>
|
|
65
65
|
|
|
66
66
|
<div>
|
|
@@ -94,10 +94,7 @@
|
|
|
94
94
|
file
|
|
95
95
|
})
|
|
96
96
|
.then((res) => {
|
|
97
|
-
|
|
97
|
+
console.log('response', res)
|
|
98
|
-
name: res.data.name,
|
|
99
|
-
image: res.data.base64
|
|
100
|
-
})
|
|
101
98
|
})
|
|
102
99
|
}
|
|
103
100
|
}
|
|
@@ -108,7 +105,7 @@
|
|
|
108
105
|
|
|
109
106
|
fileupload.js
|
|
110
107
|
|
|
111
|
-
```
|
|
108
|
+
```JavaScript
|
|
112
109
|
export const state = () => ({
|
|
113
110
|
files: []
|
|
114
111
|
})
|
|
@@ -125,6 +122,10 @@
|
|
|
125
122
|
.catch((error) => {
|
|
126
123
|
return error.response
|
|
127
124
|
})
|
|
125
|
+
context.commit('add', {
|
|
126
|
+
name: response.data.name,
|
|
127
|
+
image: response.data.base64
|
|
128
|
+
})
|
|
128
129
|
return response
|
|
129
130
|
}
|
|
130
131
|
}
|