質問編集履歴

1

画像アップロード処理が記載されているvueファイル及びphp(api)ファイルを追記しました。

2021/05/25 04:44

投稿

nanami0221
nanami0221

スコア18

test CHANGED
File without changes
test CHANGED
@@ -64,7 +64,447 @@
64
64
 
65
65
       ∟〜〜〜〜.png
66
66
 
67
-
67
+ resources
68
+
69
+  ∟js
70
+
71
+   ∟components
72
+
73
+    ∟projects
74
+
75
+     ∟ProjectRegisterComponent.vue(アップロード処理が記載されているファイル)
76
+
77
+
78
+
79
+ ```
80
+
81
+
82
+
83
+ ```Vue
84
+
85
+ // 画像アップロード処理のJSファイル
86
+
87
+ <template>
88
+
89
+ <div class="allWrapper">
90
+
91
+ <div class="content__box">
92
+
93
+ <div class="content__box__inner">
94
+
95
+ <!-- 複数読み込み -->
96
+
97
+ <div
98
+
99
+ class="content__input"
100
+
101
+ v-for="(survey, index) in surveys"
102
+
103
+ :key="survey.id"
104
+
105
+ >
106
+
107
+ <div class="input__img__block">
108
+
109
+ <div class="input__img__block__inner containFlexImg"
110
+
111
+ :class="{enter: survey.isEnter}">
112
+
113
+ <img :src="survey.thumbImg" ref="thumbFile">
114
+
115
+ </div>
116
+
117
+ <div class="input__delete"
118
+
119
+ :class="{get: survey.getImg}"
120
+
121
+ <span><img src="/assets/img/icon_batu_white.png"></span>
122
+
123
+ </div>
124
+
125
+ <label>
126
+
127
+ <span>{{ survey.status }}</span>
128
+
129
+ <input
130
+
131
+ type="file"
132
+
133
+ multiple="multiple"
134
+
135
+ ref="file"
136
+
137
+ class="avatar_name"
138
+
139
+ accept="image/jpeg, image/png, application/pdf"
140
+
141
+ />
142
+
143
+ </label>
144
+
145
+ </div>
146
+
147
+ <div class="input__box" style="margin-top: 1em;">
148
+
149
+ <div class="input__box subText">
150
+
151
+ <textarea class="bgType" name v-model="survey.description"></textarea>
152
+
153
+ </div>
154
+
155
+ </div>
156
+
157
+ </div>
158
+
159
+ <div class="content__input">
160
+
161
+ <div class="input__box">
162
+
163
+ <textarea
164
+
165
+ class="bgType"
166
+
167
+ placeholder="南面が狭小の為、近隣に注意して作業してください。"
168
+
169
+ v-model="remark"
170
+
171
+ ></textarea>
172
+
173
+ </div>
174
+
175
+ <template v-if="enable_sms == '1'">
176
+
177
+ <div class="content__confirmation">
178
+
179
+ <label class="checkbox__label">
180
+
181
+ 送信する
182
+
183
+ <input type="checkbox" name v-model="is_send_to_project_orderer" />
184
+
185
+ <div class="checkbox__block"></div>
186
+
187
+ </label>
188
+
189
+ </div>
190
+
191
+ </template>
192
+
193
+ </div>
194
+
195
+ </div>
196
+
197
+ <div class="content__submit f__center">
198
+
199
+ <div class="submit__box">
200
+
201
+ <a href @click.prevent="storeSurvey">現調報告する</a>
202
+
203
+ </div>
204
+
205
+ </div>
206
+
207
+ </div>
208
+
209
+ </template>
210
+
211
+ <script>
212
+
213
+ import axios from "./../../utilities/axios";
214
+
215
+ import errorHandling from "./../../utilities/handling";
216
+
217
+
218
+
219
+ export default {
220
+
221
+ props: {
222
+
223
+ project_id: {
224
+
225
+ type: String,
226
+
227
+ },
228
+
229
+ survey_id: {
230
+
231
+ type: String,
232
+
233
+ },
234
+
235
+ enable_sms: {
236
+
237
+ type: String,
238
+
239
+ },
240
+
241
+ urlPrefix: {
242
+
243
+ type: String
244
+
245
+ },
246
+
247
+ },
248
+
249
+ data() {
250
+
251
+ return {
252
+
253
+ surveys: [],
254
+
255
+ is_send_to_project_orderer: false,
256
+
257
+ remark: "",
258
+
259
+ deleted_survey_image_ids: [],
260
+
261
+ };
262
+
263
+ },
264
+
265
+ created: function () {
266
+
267
+ // 空データを1つ、変数へ登録
268
+
269
+ let emptyItem = {
270
+
271
+ imageId: null,
272
+
273
+ thumbImg: "/assets/img/noImage.png",
274
+
275
+ status: "画像を追加",
276
+
277
+ getImg: false,
278
+
279
+ isEnter: false,
280
+
281
+ file: "null",
282
+
283
+ description: "",
284
+
285
+ };
286
+
287
+ this.surveys.push(emptyItem);
288
+
289
+ },
290
+
291
+ methods: {
292
+
293
+ // 新規のアップロード領域を追加する
294
+
295
+ if (!isOverwrite) {
296
+
297
+ let item = {
298
+
299
+ imageId: null,
300
+
301
+ thumbImg: "/assets/img/noImage.png",
302
+
303
+ status: "画像を追加",
304
+
305
+ getImg: false,
306
+
307
+ isEnter: false,
308
+
309
+ file: "null",
310
+
311
+ description: "",
312
+
313
+ };
314
+
315
+ this.surveys.push(item);
316
+
317
+ }
318
+
319
+ },
320
+
321
+ // 現地調査報告を登録
322
+
323
+ storeSurvey: function () {
324
+
325
+ let formData = new FormData();
326
+
327
+ let fileCount = 0
328
+
329
+ // 現場調査報告をforEach分で全て取得する
330
+
331
+ this.surveys.forEach((survey) => {
332
+
333
+ formData.append("descriptions[]", survey.description);
334
+
335
+ formData.append("images[file][]", survey.file);
336
+
337
+ if (survey.file != "null") {
338
+
339
+ fileCount++
340
+
341
+ }
342
+
343
+ });
344
+
345
+ // 何も登録されていない場合のエラー処理
346
+
347
+ if (fileCount <= 0) {
348
+
349
+ alert("報告書が作成されてないので送信できません。")
350
+
351
+ return 0
352
+
353
+ }
354
+
355
+ // SMS送信処理
356
+
357
+ formData.append(
358
+
359
+ "is_send_to_project_orderer",
360
+
361
+ this.is_send_to_project_orderer
362
+
363
+ );
364
+
365
+ // 備考及び現場調査報告IDの処理
366
+
367
+ formData.append("remark", this.remark);
368
+
369
+ formData.append("project_id", this.project_id);
370
+
371
+ // 画像処理する際のコマンド
372
+
373
+ let config = {
374
+
375
+ headers: {
376
+
377
+ "content-type": "multipart/form-data",
378
+
379
+ },
380
+
381
+ };
382
+
383
+ // 現場調査報告登録API
384
+
385
+ axios
386
+
387
+ .post("/api/surveys", formData, config)
388
+
389
+ .then((result) => {
390
+
391
+ // 登録後、完了画面へ遷移
392
+
393
+ location.href = this.urlPrefix + "/projects/survey/" + this.project_id + "/complete";
394
+
395
+ })
396
+
397
+ .catch((result) => {
398
+
399
+ errorHandling.errorMessage(result);
400
+
401
+ });
402
+
403
+ },
404
+
405
+ };
406
+
407
+ </script>
408
+
409
+ ```
410
+
411
+
412
+
413
+ ```php
414
+
415
+ /app/app/Http/Controllers/Api/SurveysController.php
416
+
417
+
418
+
419
+ class SurveysController extends ApiBaseController
420
+
421
+ {
422
+
423
+ public function store(SurveyRequest $request)
424
+
425
+ {
426
+
427
+ \DB::transaction(function () use ($request) {
428
+
429
+ // 現地調査を登録
430
+
431
+ $project = Project::find($request->project_id);
432
+
433
+ $project->is_surveyed = 1;
434
+
435
+ $project->surveyed_at = Carbon::now();
436
+
437
+ $project->save();
438
+
439
+ $survey = new Survey;
440
+
441
+ $survey->is_send_to_project_orderer = $request->is_send_to_project_orderer == "true" ? true : false;
442
+
443
+ $survey->remark = $request->remark !== "null" ? $request->remark : null;
444
+
445
+ $survey->url = '';
446
+
447
+ $survey->project_label = $project->projectLabel->id;
448
+
449
+ $survey->save();
450
+
451
+ $survey->url = '/progress/survey/' . $survey->id;
452
+
453
+ $survey->save();
454
+
455
+
456
+
457
+ $url = null;
458
+
459
+ foreach ($request['images']['file'] as $index => $image) {
460
+
461
+ // ファイルをアップロード
462
+
463
+ // $url = $image->store('surveys');
464
+
465
+ $url = $image->store('public/img/surveys');
466
+
467
+ // $url = $image->store('img/surveys');
468
+
469
+ $surveyImage = new SurveyImage;
470
+
471
+ $surveyImage->img = $url;
472
+
473
+ $surveyImage->description = $request['descriptions'][$index] !== "null" ? $request['descriptions'][$index] : null;
474
+
475
+ $surveyImage->survey_id = $survey->id;
476
+
477
+ $surveyImage->save();
478
+
479
+ }
480
+
481
+ // ショートメッセージを送信
482
+
483
+ if ($project->user->enable_sms) {
484
+
485
+ if ($request->is_send_to_project_orderer == "true") {
486
+
487
+ $type = config('const.sms.type.survey');
488
+
489
+ $message =
490
+
491
+ $project->projectOrderer->company.' 様
492
+
493
+ SMS送信
494
+
495
+ '.route('sponsor.index');
496
+
497
+ SmsService::sendToProjectOrderer($project->id, $type, $message);
498
+
499
+ }
500
+
501
+ }
502
+
503
+ });
504
+
505
+ return response()->noContent();
506
+
507
+ }
68
508
 
69
509
  ```
70
510
 
@@ -76,12 +516,18 @@
76
516
 
77
517
  ##### 1.シンボリックリンク作成
78
518
 
519
+ ```
520
+
79
521
  php artisan storage:link
80
522
 
523
+ ```
524
+
81
525
 
82
526
 
83
527
  ##### 2.キャッシュクリア
84
528
 
529
+ ```
530
+
85
531
  php artisan cache:clear
86
532
 
87
533
  php artisan config:clear
@@ -98,10 +544,14 @@
98
544
 
99
545
  php artisan config:cache
100
546
 
547
+ ```
548
+
101
549
 
102
550
 
103
551
  ##### 3.filesystems.php確認済み
104
552
 
553
+ ```
554
+
105
555
  /app/config/filesystems.php
106
556
 
107
557
  <?php
@@ -120,6 +570,8 @@
120
570
 
121
571
  ];
122
572
 
573
+ ```
574
+
123
575
 
124
576
 
125
577
  ### 補足情報(FW/ツールのバージョンなど)