質問編集履歴

2

文字の修正

2020/08/21 15:36

投稿

Lindsey
Lindsey

スコア1

test CHANGED
File without changes
test CHANGED
@@ -10,262 +10,264 @@
10
10
 
11
11
 
12
12
 
13
+
14
+
15
+
16
+
17
+ ###ー問題点ー
18
+
19
+
20
+
21
+ ・画像のmysqlへの保存ができなくなってしまった 
22
+
23
+ (controller/create投稿画像(image)とdevise/registration/newユーザーアイコン(avatar))
24
+
25
+
26
+
27
+ ・画像投稿時にJqueryでプレビューを表示していましたが、プレビューの機能をコメントアウトすると保存ができる
28
+
29
+
30
+
31
+ (readAsDataURlでエンコードされているため保存できなのか?と思いましたが、以前はできていたのにいきなりできなくなってしまった理由がわかりません)
32
+
33
+
34
+
35
+
36
+
37
+ ###ー経緯ー
38
+
39
+ 作成中ポートフォリオの画像保存先をS3に変更しようとしていてymlなどを変更していた
40
+
41
+
42
+
43
+ 開発環境とテスト環境での画像の保存先はローカルのpublicをと条件分岐をしていたのにも関わらず保存ができていない
44
+
45
+
46
+
47
+ debugしてみると画像をしている画像が入っていないとのエラーでロールバックが起こっている状態
48
+
49
+
50
+
51
+ 画面はcreate後redirectされ動いていますが保存がされておらず、
52
+
53
+ 何故かJqueryのプレビュー機能部分をコメントアウトをし、投稿すると以前通り保存ができる
54
+
55
+
56
+
57
+ ※deviseを使用しての新規登録時のアイコン(avatar)は
58
+
59
+ configure_permitted_parametersに追加済
60
+
61
+ ※strong prametersにimageも追加済
62
+
63
+
64
+
65
+ ```
66
+
67
+ //ターミナルでのロールバック
68
+
69
+ Processing by PostsController#create as HTML
70
+
71
+ Parameters: {"utf8"=>"✓", "authenticity_token"=>"VsnuK3JoaOvnBlXkw9PZwaQtpejusOqPJjbyVw8u1DUghgnqfWW5e8TZtgvEsctM1EwoQ8VSBEt1++jqw0jEKg==", "post"=>{"title"=>"BTS♩", "country"=>"韓国", "city"=>"", "how"=>"", "discription"=>"111"}, "commit"=>"投稿"}
72
+
73
+
74
+
75
+
76
+
77
+ (1.8ms) BEGIN
78
+
79
+ ↳ app/controllers/posts_controller.rb:16
80
+
81
+ (0.2ms) ROLLBACK
82
+
83
+ ↳ app/controllers/posts_controller.rb:16
84
+
85
+ (0.2ms) BEGIN
86
+
87
+ ↳ app/controllers/posts_controller.rb:18
88
+
89
+ (0.1ms) ROLLBACK
90
+
91
+ ↳ app/controllers/posts_controller.rb:18
92
+
93
+
94
+
95
+ ```
96
+
97
+
98
+
99
+ ```
100
+
101
+ //logger.debugでのエラー文
102
+
103
+
104
+
105
+ #<ActiveModel::Errors:0x00007fa716882330 @base=#<Post id: nil, city: "", how: "", discription: "111", created_at: nil, updated_at: nil, like_count: nil, title: "BTS♩", country: "韓国", user_id: 1, image: nil>, @messages={:image=>["can't be blank"]}, @details={:image=>[{:error=>:blank}]}>
106
+
107
+
108
+
109
+ ```
110
+
111
+
112
+
113
+ ###コード
114
+
115
+
116
+
117
+ ```controller
118
+
119
+ def new
120
+
121
+ @post = Post.new
122
+
123
+
124
+
125
+ end
126
+
127
+
128
+
129
+ def create
130
+
131
+ @post = current_user.posts.create(post_params)
132
+
133
+ @post.save
134
+
135
+ redirect_to posts_path
136
+
137
+ # logger.debug @post.errors.inspect
138
+
139
+ end
140
+
141
+
142
+
143
+ private
144
+
145
+ def post_params
146
+
147
+ params.require(:post).permit(:image, :title, :country, :city, :how, :discription, :like_count)
148
+
149
+ end
150
+
151
+
152
+
153
+
154
+
155
+
156
+
157
+ ```
158
+
159
+
160
+
161
+ ```jquery
162
+
163
+ $(function () {
164
+
165
+ $('form').on('change', 'input[type="file"]', function (e) {
166
+
167
+ var file = e.target.files[0],
168
+
169
+ reader = new FileReader(),
170
+
171
+ $preview = $(".preview");
172
+
173
+
174
+
175
+ if (file.type.indexOf("image") < 0) {
176
+
177
+ return false; //一致するものがなければfalse
178
+
179
+ }
180
+
181
+
182
+
183
+ reader.onload = (function (file) {
184
+
185
+ return function (e) {
186
+
187
+ $preview.empty(); //空の状態にする
188
+
189
+ $preview.append($('<img>').attr({ //属性をpreviewのimgに追加
190
+
191
+ src: e.target.result, //取得した結果
192
+
193
+ width: "250px",
194
+
195
+ height: "250px",
196
+
197
+ class: "preview",
198
+
199
+ title: file.name
200
+
201
+ }));
202
+
203
+ };
204
+
205
+ })(file);
206
+
207
+
208
+
209
+ reader.readAsDataURL(file); //ファイル読み込み
210
+
211
+ });
212
+
213
+ });
214
+
215
+
216
+
217
+ ```
218
+
219
+ new controllerでプレビューを表示する投稿画面
220
+
221
+
222
+
223
+ ```form
224
+
225
+ .main
226
+
227
+ -# .main__right
228
+
229
+ = form_for(@post, url: posts_path) do |f|
230
+
231
+ .preview
232
+
233
+ = f.label :image, for: "upload-image", class: "image-preview" do
234
+
235
+ - if @post.image.url.present?
236
+
237
+ = image_tag @post.image.url, alt: "preview", class: "preview-image"
238
+
239
+ -else
240
+
241
+ = icon('fa', 'camera')
242
+
243
+ = f.file_field :image, class: "hidden", id: "upload-image"
244
+
245
+
246
+
247
+ ```
248
+
249
+
250
+
251
+
252
+
253
+ ### 試したこと
254
+
255
+
256
+
257
+ ・最初はS3のために変更した部分に問題があるのかと思い、変更した部分をコメントアウトして試していましたがそれでもダメだったので、保存先をローカルに戻しましたがダメでした。
258
+
259
+
260
+
261
+ ### 補足情報(FW/ツールのバージョンなど)
262
+
263
+ ・CarrierWaveでPost(投稿)モデルのimageカラムとUserモデルのavatarカラムを投稿しています。
264
+
265
+
266
+
267
+
268
+
13
269
  ---
14
270
 
15
-
16
-
17
- ー問題点ー
18
-
19
- ・画像のmysqlへの保存ができなくなってしまった 
20
-
21
- (controller/create投稿画像(image)とdevise/registration/newユーザーアイコン(avatar))
22
-
23
-
24
-
25
- ・画像投稿時にJqueryでプレビューを表示していましたが、プレビューの機能をコメントアウトすると保存ができる
26
-
27
-
28
-
29
- (readAsDataURlでエンコードされているため保存できなのか?と思いましたが、以前はできていたのにいきなりできなくなってしまった理由がわかりません)
30
-
31
-
32
-
33
-
34
-
35
- ー経緯ー
36
-
37
- 作成中ポートフォリオの画像保存先をS3に変更しようとしていてymlなどを変更していた
38
-
39
-
40
-
41
- 開発環境とテスト環境での画像の保存先はローカルのpublicをと条件分岐をしていたのにも関わらず保存ができていない
42
-
43
-
44
-
45
- debugしてみると画像をしている画像が入っていないとのエラーでロールバックが起こっている状態
46
-
47
-
48
-
49
- 画面はcreate後redirectされ動いていますが保存がされておらず、
50
-
51
- 何故かJqueryのプレビュー機能部分をコメントアウトをし、投稿すると以前通り保存ができる
52
-
53
-
54
-
55
- ※deviseを使用しての新規登録時のアイコン(avatar)は
56
-
57
- configure_permitted_parametersに追加済
58
-
59
- ※strong prametersにimageも追加済
60
-
61
-
62
-
63
- ```
64
-
65
- //ターミナルでのロールバック
66
-
67
- Processing by PostsController#create as HTML
68
-
69
- Parameters: {"utf8"=>"✓", "authenticity_token"=>"VsnuK3JoaOvnBlXkw9PZwaQtpejusOqPJjbyVw8u1DUghgnqfWW5e8TZtgvEsctM1EwoQ8VSBEt1++jqw0jEKg==", "post"=>{"title"=>"BTS♩", "country"=>"韓国", "city"=>"", "how"=>"", "discription"=>"111"}, "commit"=>"投稿"}
70
-
71
-
72
-
73
-
74
-
75
- (1.8ms) BEGIN
76
-
77
- ↳ app/controllers/posts_controller.rb:16
78
-
79
- (0.2ms) ROLLBACK
80
-
81
- ↳ app/controllers/posts_controller.rb:16
82
-
83
- (0.2ms) BEGIN
84
-
85
- ↳ app/controllers/posts_controller.rb:18
86
-
87
- (0.1ms) ROLLBACK
88
-
89
- ↳ app/controllers/posts_controller.rb:18
90
-
91
-
92
-
93
- ```
94
-
95
-
96
-
97
- ```
98
-
99
- //logger.debugでのエラー文
100
-
101
-
102
-
103
- #<ActiveModel::Errors:0x00007fa716882330 @base=#<Post id: nil, city: "", how: "", discription: "111", created_at: nil, updated_at: nil, like_count: nil, title: "BTS♩", country: "韓国", user_id: 1, image: nil>, @messages={:image=>["can't be blank"]}, @details={:image=>[{:error=>:blank}]}>
104
-
105
-
106
-
107
- ```
108
-
109
-
110
-
111
- ###コード
112
-
113
-
114
-
115
- ```controller
116
-
117
- def new
118
-
119
- @post = Post.new
120
-
121
-
122
-
123
- end
124
-
125
-
126
-
127
- def create
128
-
129
- @post = current_user.posts.create(post_params)
130
-
131
- @post.save
132
-
133
- redirect_to posts_path
134
-
135
- # logger.debug @post.errors.inspect
136
-
137
- end
138
-
139
-
140
-
141
- private
142
-
143
- def post_params
144
-
145
- params.require(:post).permit(:image, :title, :country, :city, :how, :discription, :like_count)
146
-
147
- end
148
-
149
-
150
-
151
-
152
-
153
-
154
-
155
- ```
156
-
157
-
158
-
159
- ```jquery
160
-
161
- $(function () {
162
-
163
- $('form').on('change', 'input[type="file"]', function (e) {
164
-
165
- var file = e.target.files[0],
166
-
167
- reader = new FileReader(),
168
-
169
- $preview = $(".preview");
170
-
171
-
172
-
173
- if (file.type.indexOf("image") < 0) {
174
-
175
- return false; //一致するものがなければfalse
176
-
177
- }
178
-
179
-
180
-
181
- reader.onload = (function (file) {
182
-
183
- return function (e) {
184
-
185
- $preview.empty(); //空の状態にする
186
-
187
- $preview.append($('<img>').attr({ //属性をpreviewのimgに追加
188
-
189
- src: e.target.result, //取得した結果
190
-
191
- width: "250px",
192
-
193
- height: "250px",
194
-
195
- class: "preview",
196
-
197
- title: file.name
198
-
199
- }));
200
-
201
- };
202
-
203
- })(file);
204
-
205
-
206
-
207
- reader.readAsDataURL(file); //ファイル読み込み
208
-
209
- });
210
-
211
- });
212
-
213
-
214
-
215
- ```
216
-
217
- new controllerでプレビューを表示する投稿画面
218
-
219
-
220
-
221
- ```form
222
-
223
- .main
224
-
225
- -# .main__right
226
-
227
- = form_for(@post, url: posts_path) do |f|
228
-
229
- .preview
230
-
231
- = f.label :image, for: "upload-image", class: "image-preview" do
232
-
233
- - if @post.image.url.present?
234
-
235
- = image_tag @post.image.url, alt: "preview", class: "preview-image"
236
-
237
- -else
238
-
239
- = icon('fa', 'camera')
240
-
241
- = f.file_field :image, class: "hidden", id: "upload-image"
242
-
243
-
244
-
245
- ```
246
-
247
-
248
-
249
-
250
-
251
- ### 試したこと
252
-
253
-
254
-
255
- ・最初はS3のために変更した部分に問題があるのかと思い、変更した部分をコメントアウトして試していましたがそれでもダメだったので、保存先をローカルに戻しましたがダメでした。
256
-
257
-
258
-
259
- ### 補足情報(FW/ツールのバージョンなど)
260
-
261
- ・CarrierWaveでPost(投稿)モデルのimageカラムとUserモデルのavatarカラムを投稿しています。
262
-
263
-
264
-
265
-
266
-
267
- ---
268
-
269
271
  **最後に**
270
272
 
271
273
  調べましたが、相当する事例ブログなどが見つからず困っています!

1

内容を追加

2020/08/21 15:36

投稿

Lindsey
Lindsey

スコア1

test CHANGED
File without changes
test CHANGED
@@ -2,9 +2,21 @@
2
2
 
3
3
 
4
4
 
5
+ ###環境
6
+
7
+ Ruby 2.5.1
8
+
9
+ Rails 5.2.3
10
+
11
+
12
+
13
+ ---
14
+
15
+
16
+
5
17
  ー問題点ー
6
18
 
7
- ・画像の保存ができなくなってしまった 
19
+ ・画像のmysqlへの保存ができなくなってしまった 
8
20
 
9
21
  (controller/create投稿画像(image)とdevise/registration/newユーザーアイコン(avatar))
10
22