teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

9

追記

2021/02/13 04:17

投稿

izaya
izaya

スコア16

title CHANGED
File without changes
body CHANGED
@@ -5,8 +5,104 @@
5
5
  ```vue
6
6
  <template>
7
7
 
8
- <!-- -->
8
+ <div class="user-edit-page">
9
9
 
10
+ <div class="user-edit">
11
+
12
+ <div class="user-edit-box" v-if="form">
13
+
14
+ <!-- トップ -->
15
+ <div class="user-edit-top">
16
+ プロフィール編集
17
+ </div>
18
+
19
+ <div class="user-edit-name-icon">
20
+
21
+ <!-- アイコン -->
22
+ <div class="user-edit-icon-name">
23
+
24
+ <div class="user-edit-icon">
25
+
26
+ <!-- アイコンのプレビュー削除ボタン -->
27
+ <img v-if="url" class="user-edit-batsu-icon" :src="'../../../image/batsu.png'" @click="deletePreview">
28
+
29
+ <!-- 元々のアイコン -->
30
+ <img class="user-edit-icon-img" v-if="form.icon && !url" :src="form.icon">
31
+ <!-- アイコンがない場合の仮画像 -->
32
+ <img class="user-edit-icon-img" v-if="!form.icon && !url" :src="'../../../image/user.png'">
33
+ <!-- アップロードしたアイコンのプレビュー -->
34
+ <div v-if="url" class="preview" :style="{ backgroundImage: 'url(' + url + ')' }"></div>
35
+
36
+ </div>
37
+
38
+ <!-- アイコン画像アップロードボタン -->
39
+ <div class="user-edit-icon-up">
40
+ <label>
41
+ <img class="image-icon" :src="'../../../image/image.png'">
42
+ <input class="file-upload" type="file" ref="preview" @change="uploadIcon" accept="image/*">
43
+ </label>
44
+ </div>
45
+
46
+ <!-- アイコン画像のエラーメッセージ表示 -->
47
+ <div v-if="message" class="user-edit-error">
48
+ {{ message }}
49
+ </div>
50
+
51
+ </div>
52
+
53
+ <!-- 現在のユーザー名表示 -->
54
+ <div class="user-edit-current-user-name">
55
+ {{ form.name }}
56
+ </div>
57
+
58
+ </div>
59
+
60
+ <!-- ユーザー名変更欄 -->
61
+ <div class="user-edit-user-name">
62
+
63
+ <label for="name">
64
+ ユーザー名
65
+ </label>
66
+
67
+ <input type="text" id="name" v-model="form.name">
68
+
69
+ <div v-if="errors.name" class="user-edit-error">
70
+ {{ errors.name[0] }}
71
+ </div>
72
+
73
+ </div>
74
+
75
+ <!-- 自己紹介文 -->
76
+ <div class="user-edit-pr">
77
+
78
+ <label for="pr">
79
+ 自己紹介
80
+ </label>
81
+
82
+ <textarea v-model="form.pr" id="pr"></textarea>
83
+
84
+ <div v-if="errors.pr" class="user-edit-error">
85
+ {{ errors.pr[0] }}
86
+ </div>
87
+
88
+ </div>
89
+
90
+ <!-- 変更ボタン -->
91
+ <div class="user-edit-modify-btn" @click="submit">
92
+ 変更
93
+ </div>
94
+
95
+ <!-- テスト -->
96
+ <div class="user-edit-modify-btn" @click="checkForm">
97
+ チェック
98
+ </div>
99
+
100
+ </div>
101
+
102
+ </div>
103
+
104
+ </div>
105
+
10
106
  </template>
11
107
 
12
108
 

8

追記

2021/02/13 04:17

投稿

izaya
izaya

スコア16

title CHANGED
File without changes
body CHANGED
@@ -32,14 +32,36 @@
32
32
  },
33
33
 
34
34
  methods: {
35
-
35
+ // 画像の検証とプレビュー表示
36
+ uploadIcon() {
37
+ this.form.newIconImage = this.$refs.preview.files[0];
38
+ if (!this.form.newIconImage.type.match('image.*')) {
39
+ this.message = '画像ファイルを選択してください';
40
+ this.form.newIconImage = null;
41
+ return;
42
+ }
43
+ this.form.icon_url = null;
44
+ this.url = URL.createObjectURL(this.form.newIconImage);
45
+ this.$refs.preview.value = '';
46
+ this.message = '';
47
+ console.log(this.form.newIconImage);
48
+ console.log(this.url);
49
+ },
36
- // 略
50
+ // 画像のプレビュー削除
37
-
51
+ deletePreview() {
52
+ URL.revokeObjectURL(this.url);
53
+ this.form.newIconImage = null;
54
+ this.form.icon_url = null;
55
+ this.url = '';
56
+ console.log(this.form.newIconImage);
57
+ console.log(this.form.icon_url);
58
+ console.log(this.url);
59
+ },
38
60
  // 変更を送信
39
61
  submit() {
40
62
  let data = new FormData();
41
63
  data.append('id', this.form.id);
42
- data.append('icon_url', this.form.icon);
64
+ data.append('icon_url', this.form.icon_url);
43
65
  data.append('name', this.form.name);
44
66
  data.append('pr', this.form.pr);
45
67
  data.append('newIconImage', this.form.newIconImage);

7

追記

2021/02/12 14:01

投稿

izaya
izaya

スコア16

title CHANGED
File without changes
body CHANGED
@@ -136,4 +136,6 @@
136
136
  $request->hasFile('newIconImage')は値なし、
137
137
  $request->icon_urlはnullになっていました。
138
138
 
139
- なぜelse ifのところの処理が呼ばれないのでしょうか?
139
+ なぜelse ifのところの処理が呼ばれないのでしょうか?
140
+
141
+ ちなみに、アップロードの方はちゃんとできます。

6

追記

2021/02/12 11:25

投稿

izaya
izaya

スコア16

title CHANGED
File without changes
body CHANGED
@@ -42,7 +42,7 @@
42
42
  data.append('icon_url', this.form.icon);
43
43
  data.append('name', this.form.name);
44
44
  data.append('pr', this.form.pr);
45
- data.append('newIconImage', this.form.iconImage);
45
+ data.append('newIconImage', this.form.newIconImage);
46
46
  axios.post('/api/user/edit', data)
47
47
  .then(() => {
48
48
  this.$router.push({ name: 'user', params: { id: this.form.id }});

5

追記

2021/02/12 10:01

投稿

izaya
izaya

スコア16

title CHANGED
File without changes
body CHANGED
File without changes

4

追記

2021/02/12 09:44

投稿

izaya
izaya

スコア16

title CHANGED
File without changes
body CHANGED
@@ -17,11 +17,11 @@
17
17
  // 送信データ
18
18
  form: {
19
19
  id: null,
20
- icon: null,
20
+ icon_url: null,
21
21
  name: null,
22
22
  pr: null,
23
23
  // 新しいアイコン
24
- iconImage: null,
24
+ newIconImage: null,
25
25
  },
26
26
  errors: [],
27
27
  // プレビュー用データ
@@ -32,39 +32,17 @@
32
32
  },
33
33
 
34
34
  methods: {
35
- // 画像の検証とプレビュー表示
35
+
36
- uploadIcon() {
37
- this.form.iconImage = this.$refs.preview.files[0];
38
- if (!this.form.iconImage.type.match('image.*')) {
39
- this.message = '画像ファイルを選択してください';
40
- this.form.iconImage = null;
41
- return;
42
- }
43
- this.currentIcon = null;
44
- this.url = URL.createObjectURL(this.form.iconImage);
45
- this.$refs.preview.value = '';
46
- this.message = '';
47
- console.log(this.form.iconImage);
48
- console.log(this.url);
49
- },
50
- // 画像のプレビュー削除
36
+ // 略
51
- deletePreview() {
37
+
52
- URL.revokeObjectURL(this.url);
53
- this.form.iconImage = null;
54
- this.form.icon = null;
55
- this.url = '';
56
- console.log(this.form.iconImage);
57
- console.log(this.form.icon);
58
- console.log(this.url);
59
- },
60
38
  // 変更を送信
61
39
  submit() {
62
40
  let data = new FormData();
63
41
  data.append('id', this.form.id);
64
- data.append('icon', this.form.icon);
42
+ data.append('icon_url', this.form.icon);
65
43
  data.append('name', this.form.name);
66
44
  data.append('pr', this.form.pr);
67
- data.append('iconImage', this.form.iconImage);
45
+ data.append('newIconImage', this.form.iconImage);
68
46
  axios.post('/api/user/edit', data)
69
47
  .then(() => {
70
48
  this.$router.push({ name: 'user', params: { id: this.form.id }});
@@ -79,7 +57,7 @@
79
57
  .then((res) => {
80
58
  console.log(res.data);
81
59
  this.$set(this.form, 'id', res.data.id);
82
- this.$set(this.form, 'icon', res.data.icon);
60
+ this.$set(this.form, 'icon', res.data.icon_url);
83
61
  this.$set(this.form, 'name', res.data.name);
84
62
  this.$set(this.form, 'pr', res.data.pr);
85
63
  });

3

追記

2021/02/12 09:40

投稿

izaya
izaya

スコア16

title CHANGED
File without changes
body CHANGED
@@ -5,99 +5,8 @@
5
5
  ```vue
6
6
  <template>
7
7
 
8
- <div class="user-edit-page">
8
+ <!-- -->
9
9
 
10
- <div class="user-edit">
11
-
12
- <div class="user-edit-box" v-if="form">
13
-
14
- <!-- トップ -->
15
- <div class="user-edit-top">
16
- プロフィール編集
17
- </div>
18
-
19
- <div class="user-edit-name-icon">
20
-
21
- <!-- アイコン -->
22
- <div class="user-edit-icon-name">
23
-
24
- <div class="user-edit-icon">
25
-
26
- <!-- アイコンのプレビュー削除ボタン -->
27
- <img v-if="url" class="user-edit-batsu-icon" :src="'../../../image/batsu.png'" @click="deletePreview">
28
-
29
- <!-- 元々のアイコン -->
30
- <img class="user-edit-icon-img" v-if="form.icon && !url" :src="form.icon">
31
- <!-- アイコンがない場合の仮画像 -->
32
- <img class="user-edit-icon-img" v-if="!form.icon && !url" :src="'../../../image/user.png'">
33
- <!-- アップロードしたアイコンのプレビュー -->
34
- <div v-if="url" class="preview" :style="{ backgroundImage: 'url(' + url + ')' }"></div>
35
-
36
- </div>
37
-
38
- <!-- アイコン画像アップロードボタン -->
39
- <div class="user-edit-icon-up">
40
- <label>
41
- <img class="image-icon" :src="'../../../image/image.png'">
42
- <input class="file-upload" type="file" ref="preview" @change="uploadIcon" accept="image/*">
43
- </label>
44
- </div>
45
-
46
- <!-- アイコン画像のエラーメッセージ表示 -->
47
- <div v-if="message" class="user-edit-error">
48
- {{ message }}
49
- </div>
50
-
51
- </div>
52
-
53
- <!-- 現在のユーザー名表示 -->
54
- <div class="user-edit-current-user-name">
55
- {{ form.name }}
56
- </div>
57
-
58
- </div>
59
-
60
- <!-- ユーザー名変更欄 -->
61
- <div class="user-edit-user-name">
62
-
63
- <label for="name">
64
- ユーザー名
65
- </label>
66
-
67
- <input type="text" id="name" v-model="form.name">
68
-
69
- <div v-if="errors.name" class="user-edit-error">
70
- {{ errors.name[0] }}
71
- </div>
72
-
73
- </div>
74
-
75
- <!-- 自己紹介文 -->
76
- <div class="user-edit-pr">
77
-
78
- <label for="pr">
79
- 自己紹介
80
- </label>
81
-
82
- <textarea v-model="form.pr" id="pr"></textarea>
83
-
84
- <div v-if="errors.pr" class="user-edit-error">
85
- {{ errors.pr[0] }}
86
- </div>
87
-
88
- </div>
89
-
90
- <!-- 変更ボタン -->
91
- <div class="user-edit-modify-btn" @click="submit">
92
- 変更
93
- </div>
94
-
95
- </div>
96
-
97
- </div>
98
-
99
- </div>
100
-
101
10
  </template>
102
11
 
103
12
 

2

追記

2021/02/12 09:36

投稿

izaya
izaya

スコア16

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,184 @@
1
1
  ユーザーのプロフィール更新において、アイコン画像アップロードの処理をif文で条件分岐させようと思っています。
2
2
  フロントをVue.jsで作成してaxiosでpostしています。
3
3
 
4
+ ↓UserEdit.vue
5
+ ```vue
6
+ <template>
7
+
8
+ <div class="user-edit-page">
9
+
10
+ <div class="user-edit">
11
+
12
+ <div class="user-edit-box" v-if="form">
13
+
14
+ <!-- トップ -->
15
+ <div class="user-edit-top">
16
+ プロフィール編集
17
+ </div>
18
+
19
+ <div class="user-edit-name-icon">
20
+
21
+ <!-- アイコン -->
22
+ <div class="user-edit-icon-name">
23
+
24
+ <div class="user-edit-icon">
25
+
26
+ <!-- アイコンのプレビュー削除ボタン -->
27
+ <img v-if="url" class="user-edit-batsu-icon" :src="'../../../image/batsu.png'" @click="deletePreview">
28
+
29
+ <!-- 元々のアイコン -->
30
+ <img class="user-edit-icon-img" v-if="form.icon && !url" :src="form.icon">
31
+ <!-- アイコンがない場合の仮画像 -->
32
+ <img class="user-edit-icon-img" v-if="!form.icon && !url" :src="'../../../image/user.png'">
33
+ <!-- アップロードしたアイコンのプレビュー -->
34
+ <div v-if="url" class="preview" :style="{ backgroundImage: 'url(' + url + ')' }"></div>
35
+
36
+ </div>
37
+
38
+ <!-- アイコン画像アップロードボタン -->
39
+ <div class="user-edit-icon-up">
40
+ <label>
41
+ <img class="image-icon" :src="'../../../image/image.png'">
42
+ <input class="file-upload" type="file" ref="preview" @change="uploadIcon" accept="image/*">
43
+ </label>
44
+ </div>
45
+
46
+ <!-- アイコン画像のエラーメッセージ表示 -->
47
+ <div v-if="message" class="user-edit-error">
48
+ {{ message }}
49
+ </div>
50
+
51
+ </div>
52
+
53
+ <!-- 現在のユーザー名表示 -->
54
+ <div class="user-edit-current-user-name">
55
+ {{ form.name }}
56
+ </div>
57
+
58
+ </div>
59
+
60
+ <!-- ユーザー名変更欄 -->
61
+ <div class="user-edit-user-name">
62
+
63
+ <label for="name">
64
+ ユーザー名
65
+ </label>
66
+
67
+ <input type="text" id="name" v-model="form.name">
68
+
69
+ <div v-if="errors.name" class="user-edit-error">
70
+ {{ errors.name[0] }}
71
+ </div>
72
+
73
+ </div>
74
+
75
+ <!-- 自己紹介文 -->
76
+ <div class="user-edit-pr">
77
+
78
+ <label for="pr">
79
+ 自己紹介
80
+ </label>
81
+
82
+ <textarea v-model="form.pr" id="pr"></textarea>
83
+
84
+ <div v-if="errors.pr" class="user-edit-error">
85
+ {{ errors.pr[0] }}
86
+ </div>
87
+
88
+ </div>
89
+
90
+ <!-- 変更ボタン -->
91
+ <div class="user-edit-modify-btn" @click="submit">
92
+ 変更
93
+ </div>
94
+
95
+ </div>
96
+
97
+ </div>
98
+
99
+ </div>
100
+
101
+ </template>
102
+
103
+
104
+ <script>
105
+ export default {
106
+ data () {
107
+ return {
108
+ // 送信データ
109
+ form: {
110
+ id: null,
111
+ icon: null,
112
+ name: null,
113
+ pr: null,
114
+ // 新しいアイコン
115
+ iconImage: null,
116
+ },
117
+ errors: [],
118
+ // プレビュー用データ
119
+ url: '',
120
+ // ここでだけ使うデータ
121
+ message: '',
122
+ }
123
+ },
124
+
125
+ methods: {
126
+ // 画像の検証とプレビュー表示
127
+ uploadIcon() {
128
+ this.form.iconImage = this.$refs.preview.files[0];
129
+ if (!this.form.iconImage.type.match('image.*')) {
130
+ this.message = '画像ファイルを選択してください';
131
+ this.form.iconImage = null;
132
+ return;
133
+ }
134
+ this.currentIcon = null;
135
+ this.url = URL.createObjectURL(this.form.iconImage);
136
+ this.$refs.preview.value = '';
137
+ this.message = '';
138
+ console.log(this.form.iconImage);
139
+ console.log(this.url);
140
+ },
141
+ // 画像のプレビュー削除
142
+ deletePreview() {
143
+ URL.revokeObjectURL(this.url);
144
+ this.form.iconImage = null;
145
+ this.form.icon = null;
146
+ this.url = '';
147
+ console.log(this.form.iconImage);
148
+ console.log(this.form.icon);
149
+ console.log(this.url);
150
+ },
151
+ // 変更を送信
152
+ submit() {
153
+ let data = new FormData();
154
+ data.append('id', this.form.id);
155
+ data.append('icon', this.form.icon);
156
+ data.append('name', this.form.name);
157
+ data.append('pr', this.form.pr);
158
+ data.append('iconImage', this.form.iconImage);
159
+ axios.post('/api/user/edit', data)
160
+ .then(() => {
161
+ this.$router.push({ name: 'user', params: { id: this.form.id }});
162
+ }).catch((error) => {
163
+ this.errors = error.response.data.errors;
164
+ });
165
+ },
166
+ },
167
+
168
+ mounted() {
169
+ axios.get('/api/user')
170
+ .then((res) => {
171
+ console.log(res.data);
172
+ this.$set(this.form, 'id', res.data.id);
173
+ this.$set(this.form, 'icon', res.data.icon);
174
+ this.$set(this.form, 'name', res.data.name);
175
+ this.$set(this.form, 'pr', res.data.pr);
176
+ });
177
+ },
178
+ }
179
+ </script>
180
+ ```
181
+
4
182
  ↓UserController.php
5
183
 
6
184
  ```php
@@ -60,7 +238,7 @@
60
238
 
61
239
  ```
62
240
 
63
- 上のように、
241
+ 上のようにUserController.phpで
64
242
  $request->hasFile('newIconImage')が偽で
65
243
  $request->icon_urlがnullの場合は、
66
244
  上のelse ifのところの

1

追記

2021/02/12 09:34

投稿

izaya
izaya

スコア16

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