teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Laravelで画像アップロードの条件分岐ができない

編集履歴

質問編集履歴

9

追記

2021/02/13 04:17

投稿

izaya
izaya

スコア16

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,199 @@
12
12
 
13
13
 
14
14
 
15
+ <div class="user-edit-page">
16
+
17
+
18
+
19
+ <div class="user-edit">
20
+
21
+
22
+
23
+ <div class="user-edit-box" v-if="form">
24
+
25
+
26
+
15
- <!-- 略 -->
27
+ <!-- トップ -->
28
+
29
+ <div class="user-edit-top">
30
+
31
+ プロフィール編集
32
+
33
+ </div>
34
+
35
+
36
+
37
+ <div class="user-edit-name-icon">
38
+
39
+
40
+
41
+ <!-- アイコン -->
42
+
43
+ <div class="user-edit-icon-name">
44
+
45
+
46
+
47
+ <div class="user-edit-icon">
48
+
49
+
50
+
51
+ <!-- アイコンのプレビュー削除ボタン -->
52
+
53
+ <img v-if="url" class="user-edit-batsu-icon" :src="'../../../image/batsu.png'" @click="deletePreview">
54
+
55
+
56
+
57
+ <!-- 元々のアイコン -->
58
+
59
+ <img class="user-edit-icon-img" v-if="form.icon && !url" :src="form.icon">
60
+
61
+ <!-- アイコンがない場合の仮画像 -->
62
+
63
+ <img class="user-edit-icon-img" v-if="!form.icon && !url" :src="'../../../image/user.png'">
64
+
65
+ <!-- アップロードしたアイコンのプレビュー -->
66
+
67
+ <div v-if="url" class="preview" :style="{ backgroundImage: 'url(' + url + ')' }"></div>
68
+
69
+
70
+
71
+ </div>
72
+
73
+
74
+
75
+ <!-- アイコン画像アップロードボタン -->
76
+
77
+ <div class="user-edit-icon-up">
78
+
79
+ <label>
80
+
81
+ <img class="image-icon" :src="'../../../image/image.png'">
82
+
83
+ <input class="file-upload" type="file" ref="preview" @change="uploadIcon" accept="image/*">
84
+
85
+ </label>
86
+
87
+ </div>
88
+
89
+
90
+
91
+ <!-- アイコン画像のエラーメッセージ表示 -->
92
+
93
+ <div v-if="message" class="user-edit-error">
94
+
95
+ {{ message }}
96
+
97
+ </div>
98
+
99
+
100
+
101
+ </div>
102
+
103
+
104
+
105
+ <!-- 現在のユーザー名表示 -->
106
+
107
+ <div class="user-edit-current-user-name">
108
+
109
+ {{ form.name }}
110
+
111
+ </div>
112
+
113
+
114
+
115
+ </div>
116
+
117
+
118
+
119
+ <!-- ユーザー名変更欄 -->
120
+
121
+ <div class="user-edit-user-name">
122
+
123
+
124
+
125
+ <label for="name">
126
+
127
+ ユーザー名
128
+
129
+ </label>
130
+
131
+
132
+
133
+ <input type="text" id="name" v-model="form.name">
134
+
135
+
136
+
137
+ <div v-if="errors.name" class="user-edit-error">
138
+
139
+ {{ errors.name[0] }}
140
+
141
+ </div>
142
+
143
+
144
+
145
+ </div>
146
+
147
+
148
+
149
+ <!-- 自己紹介文 -->
150
+
151
+ <div class="user-edit-pr">
152
+
153
+
154
+
155
+ <label for="pr">
156
+
157
+ 自己紹介
158
+
159
+ </label>
160
+
161
+
162
+
163
+ <textarea v-model="form.pr" id="pr"></textarea>
164
+
165
+
166
+
167
+ <div v-if="errors.pr" class="user-edit-error">
168
+
169
+ {{ errors.pr[0] }}
170
+
171
+ </div>
172
+
173
+
174
+
175
+ </div>
176
+
177
+
178
+
179
+ <!-- 変更ボタン -->
180
+
181
+ <div class="user-edit-modify-btn" @click="submit">
182
+
183
+ 変更
184
+
185
+ </div>
186
+
187
+
188
+
189
+ <!-- テスト -->
190
+
191
+ <div class="user-edit-modify-btn" @click="checkForm">
192
+
193
+ チェック
194
+
195
+ </div>
196
+
197
+
198
+
199
+ </div>
200
+
201
+
202
+
203
+ </div>
204
+
205
+
206
+
207
+ </div>
16
208
 
17
209
 
18
210
 

8

追記

2021/02/13 04:17

投稿

izaya
izaya

スコア16

test CHANGED
File without changes
test CHANGED
@@ -66,11 +66,55 @@
66
66
 
67
67
  methods: {
68
68
 
69
-
69
+ // 画像の検証とプレビュー表示
70
+
70
-
71
+ uploadIcon() {
72
+
73
+ this.form.newIconImage = this.$refs.preview.files[0];
74
+
75
+ if (!this.form.newIconImage.type.match('image.*')) {
76
+
77
+ this.message = '画像ファイルを選択してください';
78
+
79
+ this.form.newIconImage = null;
80
+
81
+ return;
82
+
83
+ }
84
+
85
+ this.form.icon_url = null;
86
+
87
+ this.url = URL.createObjectURL(this.form.newIconImage);
88
+
89
+ this.$refs.preview.value = '';
90
+
91
+ this.message = '';
92
+
93
+ console.log(this.form.newIconImage);
94
+
95
+ console.log(this.url);
96
+
97
+ },
98
+
71
- //　略
99
+ // 画像のプレビュー削除
100
+
72
-
101
+ deletePreview() {
102
+
73
-
103
+ URL.revokeObjectURL(this.url);
104
+
105
+ this.form.newIconImage = null;
106
+
107
+ this.form.icon_url = null;
108
+
109
+ this.url = '';
110
+
111
+ console.log(this.form.newIconImage);
112
+
113
+ console.log(this.form.icon_url);
114
+
115
+ console.log(this.url);
116
+
117
+ },
74
118
 
75
119
  // 変更を送信
76
120
 
@@ -80,7 +124,7 @@
80
124
 
81
125
  data.append('id', this.form.id);
82
126
 
83
- data.append('icon_url', this.form.icon);
127
+ data.append('icon_url', this.form.icon_url);
84
128
 
85
129
  data.append('name', this.form.name);
86
130
 

7

追記

2021/02/12 14:01

投稿

izaya
izaya

スコア16

test CHANGED
File without changes
test CHANGED
@@ -275,3 +275,7 @@
275
275
 
276
276
 
277
277
  なぜelse ifのところの処理が呼ばれないのでしょうか？
278
+
279
+
280
+
281
+ ちなみに、アップロードの方はちゃんとできます。

6

追記

2021/02/12 11:25

投稿

izaya
izaya

スコア16

test CHANGED
File without changes
test CHANGED
@@ -86,7 +86,7 @@
86
86
 
87
87
  data.append('pr', this.form.pr);
88
88
 
89
- data.append('newIconImage', this.form.iconImage);
89
+ data.append('newIconImage', this.form.newIconImage);
90
90
 
91
91
  axios.post('/api/user/edit', data)
92
92
 

5

追記

2021/02/12 10:01

投稿

izaya
izaya

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

4

追記

2021/02/12 09:44

投稿

izaya
izaya

スコア16

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  id: null,
38
38
 
39
- icon: null,
39
+ icon_url: null,
40
40
 
41
41
  name: null,
42
42
 
@@ -44,7 +44,7 @@
44
44
 
45
45
  // 新しいアイコン
46
46
 
47
- iconImage: null,
47
+ newIconImage: null,
48
48
 
49
49
  },
50
50
 
@@ -66,86 +66,42 @@
66
66
 
67
67
  methods: {
68
68
 
69
+
70
+
71
+ //　略
72
+
73
+
74
+
69
- // 画像の検証とプレビュー表示
75
+ // 変更を送信
70
-
76
+
71
- uploadIcon() {
77
+ submit() {
72
-
78
+
73
- this.form.iconImage = this.$refs.preview.files[0];
79
+ let data = new FormData();
74
-
75
- if (!this.form.iconImage.type.match('image.*')) {
80
+
76
-
77
- this.message = '画像ファイルを選択してください';
81
+ data.append('id', this.form.id);
82
+
78
-
83
+ data.append('icon_url', this.form.icon);
84
+
79
- this.form.iconImage = null;
85
+ data.append('name', this.form.name);
80
-
81
- return;
86
+
82
-
83
- }
84
-
85
- this.currentIcon = null;
87
+ data.append('pr', this.form.pr);
86
-
88
+
87
- this.url = URL.createObjectURL(this.form.iconImage);
89
+ data.append('newIconImage', this.form.iconImage);
90
+
88
-
91
+ axios.post('/api/user/edit', data)
92
+
93
+ .then(() => {
94
+
95
+ this.$router.push({ name: 'user', params: { id: this.form.id }});
96
+
97
+ }).catch((error) => {
98
+
89
- this.$refs.preview.value = '';
99
+ this.errors = error.response.data.errors;
90
-
91
- this.message = '';
100
+
92
-
93
- console.log(this.form.iconImage);
94
-
95
- console.log(this.url);
101
+ });
96
102
 
97
103
  },
98
104
 
99
- // 画像のプレビュー削除
100
-
101
- deletePreview() {
102
-
103
- URL.revokeObjectURL(this.url);
104
-
105
- this.form.iconImage = null;
106
-
107
- this.form.icon = null;
108
-
109
- this.url = '';
110
-
111
- console.log(this.form.iconImage);
112
-
113
- console.log(this.form.icon);
114
-
115
- console.log(this.url);
116
-
117
- },
118
-
119
- // 変更を送信
120
-
121
- submit() {
122
-
123
- let data = new FormData();
124
-
125
- data.append('id', this.form.id);
126
-
127
- data.append('icon', this.form.icon);
128
-
129
- data.append('name', this.form.name);
130
-
131
- data.append('pr', this.form.pr);
132
-
133
- data.append('iconImage', this.form.iconImage);
134
-
135
- axios.post('/api/user/edit', data)
136
-
137
- .then(() => {
138
-
139
- this.$router.push({ name: 'user', params: { id: this.form.id }});
140
-
141
- }).catch((error) => {
142
-
143
- this.errors = error.response.data.errors;
144
-
145
- });
146
-
147
- },
148
-
149
105
  },
150
106
 
151
107
 
@@ -160,7 +116,7 @@
160
116
 
161
117
  this.$set(this.form, 'id', res.data.id);
162
118
 
163
- this.$set(this.form, 'icon', res.data.icon);
119
+ this.$set(this.form, 'icon', res.data.icon_url);
164
120
 
165
121
  this.$set(this.form, 'name', res.data.name);
166
122
 

3

追記

2021/02/12 09:40

投稿

izaya
izaya

スコア16

test CHANGED
File without changes
test CHANGED
@@ -12,189 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- <div class="user-edit-page">
16
-
17
-
18
-
19
- <div class="user-edit">
20
-
21
-
22
-
23
- <div class="user-edit-box" v-if="form">
24
-
25
-
26
-
27
- <!-- トップ -->
15
+ <!-- 略 -->
28
-
29
- <div class="user-edit-top">
30
-
31
- プロフィール編集
32
-
33
- </div>
34
-
35
-
36
-
37
- <div class="user-edit-name-icon">
38
-
39
-
40
-
41
- <!-- アイコン -->
42
-
43
- <div class="user-edit-icon-name">
44
-
45
-
46
-
47
- <div class="user-edit-icon">
48
-
49
-
50
-
51
- <!-- アイコンのプレビュー削除ボタン -->
52
-
53
- <img v-if="url" class="user-edit-batsu-icon" :src="'../../../image/batsu.png'" @click="deletePreview">
54
-
55
-
56
-
57
- <!-- 元々のアイコン -->
58
-
59
- <img class="user-edit-icon-img" v-if="form.icon && !url" :src="form.icon">
60
-
61
- <!-- アイコンがない場合の仮画像 -->
62
-
63
- <img class="user-edit-icon-img" v-if="!form.icon && !url" :src="'../../../image/user.png'">
64
-
65
- <!-- アップロードしたアイコンのプレビュー -->
66
-
67
- <div v-if="url" class="preview" :style="{ backgroundImage: 'url(' + url + ')' }"></div>
68
-
69
-
70
-
71
- </div>
72
-
73
-
74
-
75
- <!-- アイコン画像アップロードボタン -->
76
-
77
- <div class="user-edit-icon-up">
78
-
79
- <label>
80
-
81
- <img class="image-icon" :src="'../../../image/image.png'">
82
-
83
- <input class="file-upload" type="file" ref="preview" @change="uploadIcon" accept="image/*">
84
-
85
- </label>
86
-
87
- </div>
88
-
89
-
90
-
91
- <!-- アイコン画像のエラーメッセージ表示 -->
92
-
93
- <div v-if="message" class="user-edit-error">
94
-
95
- {{ message }}
96
-
97
- </div>
98
-
99
-
100
-
101
- </div>
102
-
103
-
104
-
105
- <!-- 現在のユーザー名表示 -->
106
-
107
- <div class="user-edit-current-user-name">
108
-
109
- {{ form.name }}
110
-
111
- </div>
112
-
113
-
114
-
115
- </div>
116
-
117
-
118
-
119
- <!-- ユーザー名変更欄 -->
120
-
121
- <div class="user-edit-user-name">
122
-
123
-
124
-
125
- <label for="name">
126
-
127
- ユーザー名
128
-
129
- </label>
130
-
131
-
132
-
133
- <input type="text" id="name" v-model="form.name">
134
-
135
-
136
-
137
- <div v-if="errors.name" class="user-edit-error">
138
-
139
- {{ errors.name[0] }}
140
-
141
- </div>
142
-
143
-
144
-
145
- </div>
146
-
147
-
148
-
149
- <!-- 自己紹介文 -->
150
-
151
- <div class="user-edit-pr">
152
-
153
-
154
-
155
- <label for="pr">
156
-
157
- 自己紹介
158
-
159
- </label>
160
-
161
-
162
-
163
- <textarea v-model="form.pr" id="pr"></textarea>
164
-
165
-
166
-
167
- <div v-if="errors.pr" class="user-edit-error">
168
-
169
- {{ errors.pr[0] }}
170
-
171
- </div>
172
-
173
-
174
-
175
- </div>
176
-
177
-
178
-
179
- <!-- 変更ボタン -->
180
-
181
- <div class="user-edit-modify-btn" @click="submit">
182
-
183
- 変更
184
-
185
- </div>
186
-
187
-
188
-
189
- </div>
190
-
191
-
192
-
193
- </div>
194
-
195
-
196
-
197
- </div>
198
16
 
199
17
 
200
18
 

2

追記

2021/02/12 09:36

投稿

izaya
izaya

スコア16

test CHANGED
File without changes
test CHANGED
@@ -4,6 +4,362 @@
4
4
 
5
5
 
6
6
 
7
+ ↓UserEdit.vue
8
+
9
+ ```vue
10
+
11
+ <template>
12
+
13
+
14
+
15
+ <div class="user-edit-page">
16
+
17
+
18
+
19
+ <div class="user-edit">
20
+
21
+
22
+
23
+ <div class="user-edit-box" v-if="form">
24
+
25
+
26
+
27
+ <!-- トップ -->
28
+
29
+ <div class="user-edit-top">
30
+
31
+ プロフィール編集
32
+
33
+ </div>
34
+
35
+
36
+
37
+ <div class="user-edit-name-icon">
38
+
39
+
40
+
41
+ <!-- アイコン -->
42
+
43
+ <div class="user-edit-icon-name">
44
+
45
+
46
+
47
+ <div class="user-edit-icon">
48
+
49
+
50
+
51
+ <!-- アイコンのプレビュー削除ボタン -->
52
+
53
+ <img v-if="url" class="user-edit-batsu-icon" :src="'../../../image/batsu.png'" @click="deletePreview">
54
+
55
+
56
+
57
+ <!-- 元々のアイコン -->
58
+
59
+ <img class="user-edit-icon-img" v-if="form.icon && !url" :src="form.icon">
60
+
61
+ <!-- アイコンがない場合の仮画像 -->
62
+
63
+ <img class="user-edit-icon-img" v-if="!form.icon && !url" :src="'../../../image/user.png'">
64
+
65
+ <!-- アップロードしたアイコンのプレビュー -->
66
+
67
+ <div v-if="url" class="preview" :style="{ backgroundImage: 'url(' + url + ')' }"></div>
68
+
69
+
70
+
71
+ </div>
72
+
73
+
74
+
75
+ <!-- アイコン画像アップロードボタン -->
76
+
77
+ <div class="user-edit-icon-up">
78
+
79
+ <label>
80
+
81
+ <img class="image-icon" :src="'../../../image/image.png'">
82
+
83
+ <input class="file-upload" type="file" ref="preview" @change="uploadIcon" accept="image/*">
84
+
85
+ </label>
86
+
87
+ </div>
88
+
89
+
90
+
91
+ <!-- アイコン画像のエラーメッセージ表示 -->
92
+
93
+ <div v-if="message" class="user-edit-error">
94
+
95
+ {{ message }}
96
+
97
+ </div>
98
+
99
+
100
+
101
+ </div>
102
+
103
+
104
+
105
+ <!-- 現在のユーザー名表示 -->
106
+
107
+ <div class="user-edit-current-user-name">
108
+
109
+ {{ form.name }}
110
+
111
+ </div>
112
+
113
+
114
+
115
+ </div>
116
+
117
+
118
+
119
+ <!-- ユーザー名変更欄 -->
120
+
121
+ <div class="user-edit-user-name">
122
+
123
+
124
+
125
+ <label for="name">
126
+
127
+ ユーザー名
128
+
129
+ </label>
130
+
131
+
132
+
133
+ <input type="text" id="name" v-model="form.name">
134
+
135
+
136
+
137
+ <div v-if="errors.name" class="user-edit-error">
138
+
139
+ {{ errors.name[0] }}
140
+
141
+ </div>
142
+
143
+
144
+
145
+ </div>
146
+
147
+
148
+
149
+ <!-- 自己紹介文 -->
150
+
151
+ <div class="user-edit-pr">
152
+
153
+
154
+
155
+ <label for="pr">
156
+
157
+ 自己紹介
158
+
159
+ </label>
160
+
161
+
162
+
163
+ <textarea v-model="form.pr" id="pr"></textarea>
164
+
165
+
166
+
167
+ <div v-if="errors.pr" class="user-edit-error">
168
+
169
+ {{ errors.pr[0] }}
170
+
171
+ </div>
172
+
173
+
174
+
175
+ </div>
176
+
177
+
178
+
179
+ <!-- 変更ボタン -->
180
+
181
+ <div class="user-edit-modify-btn" @click="submit">
182
+
183
+ 変更
184
+
185
+ </div>
186
+
187
+
188
+
189
+ </div>
190
+
191
+
192
+
193
+ </div>
194
+
195
+
196
+
197
+ </div>
198
+
199
+
200
+
201
+ </template>
202
+
203
+
204
+
205
+
206
+
207
+ <script>
208
+
209
+ export default {
210
+
211
+ data () {
212
+
213
+ return {
214
+
215
+ // 送信データ
216
+
217
+ form: {
218
+
219
+ id: null,
220
+
221
+ icon: null,
222
+
223
+ name: null,
224
+
225
+ pr: null,
226
+
227
+ // 新しいアイコン
228
+
229
+ iconImage: null,
230
+
231
+ },
232
+
233
+ errors: [],
234
+
235
+ // プレビュー用データ
236
+
237
+ url: '',
238
+
239
+ // ここでだけ使うデータ
240
+
241
+ message: '',
242
+
243
+ }
244
+
245
+ },
246
+
247
+
248
+
249
+ methods: {
250
+
251
+ // 画像の検証とプレビュー表示
252
+
253
+ uploadIcon() {
254
+
255
+ this.form.iconImage = this.$refs.preview.files[0];
256
+
257
+ if (!this.form.iconImage.type.match('image.*')) {
258
+
259
+ this.message = '画像ファイルを選択してください';
260
+
261
+ this.form.iconImage = null;
262
+
263
+ return;
264
+
265
+ }
266
+
267
+ this.currentIcon = null;
268
+
269
+ this.url = URL.createObjectURL(this.form.iconImage);
270
+
271
+ this.$refs.preview.value = '';
272
+
273
+ this.message = '';
274
+
275
+ console.log(this.form.iconImage);
276
+
277
+ console.log(this.url);
278
+
279
+ },
280
+
281
+ // 画像のプレビュー削除
282
+
283
+ deletePreview() {
284
+
285
+ URL.revokeObjectURL(this.url);
286
+
287
+ this.form.iconImage = null;
288
+
289
+ this.form.icon = null;
290
+
291
+ this.url = '';
292
+
293
+ console.log(this.form.iconImage);
294
+
295
+ console.log(this.form.icon);
296
+
297
+ console.log(this.url);
298
+
299
+ },
300
+
301
+ // 変更を送信
302
+
303
+ submit() {
304
+
305
+ let data = new FormData();
306
+
307
+ data.append('id', this.form.id);
308
+
309
+ data.append('icon', this.form.icon);
310
+
311
+ data.append('name', this.form.name);
312
+
313
+ data.append('pr', this.form.pr);
314
+
315
+ data.append('iconImage', this.form.iconImage);
316
+
317
+ axios.post('/api/user/edit', data)
318
+
319
+ .then(() => {
320
+
321
+ this.$router.push({ name: 'user', params: { id: this.form.id }});
322
+
323
+ }).catch((error) => {
324
+
325
+ this.errors = error.response.data.errors;
326
+
327
+ });
328
+
329
+ },
330
+
331
+ },
332
+
333
+
334
+
335
+ mounted() {
336
+
337
+ axios.get('/api/user')
338
+
339
+ .then((res) => {
340
+
341
+ console.log(res.data);
342
+
343
+ this.$set(this.form, 'id', res.data.id);
344
+
345
+ this.$set(this.form, 'icon', res.data.icon);
346
+
347
+ this.$set(this.form, 'name', res.data.name);
348
+
349
+ this.$set(this.form, 'pr', res.data.pr);
350
+
351
+ });
352
+
353
+ },
354
+
355
+ }
356
+
357
+ </script>
358
+
359
+ ```
360
+
361
+
362
+
7
363
  ↓UserController.php
8
364
 
9
365
 
@@ -122,7 +478,7 @@
122
478
 
123
479
 
124
480
 
125
- 上のように、
481
+ 上のようにUserController.phpで、
126
482
 
127
483
  $request->hasFile('newIconImage')が偽で
128
484
 

1

追記

2021/02/12 09:34

投稿

izaya
izaya

スコア16

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,10 @@
1
1
  ユーザーのプロフィール更新において、アイコン画像アップロードの処理をif文で条件分岐させようと思っています。
2
2
 
3
3
  フロントをVue.jsで作成してaxiosでpostしています。
4
+
5
+
6
+
7
+ ↓UserController.php
4
8
 
5
9
 
6
10