質問編集履歴
4
説明に追記を入れました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -70,15 +70,28 @@
|
|
|
70
70
|
}
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
+
マイグレーションファイル
|
|
74
|
+
```PHP
|
|
75
|
+
public function up()
|
|
76
|
+
{
|
|
77
|
+
Schema::create('images', function (Blueprint $table) {
|
|
78
|
+
$table->bigIncrements('id');
|
|
79
|
+
$table->string('path');
|
|
80
|
+
$table->timestamps();
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
73
85
|
vue.js単一コンポーネント、画像POST用のscriptコードで
|
|
74
86
|
canvasに画像を描画し、blobデータを作成
|
|
75
87
|
blobをformDataにappendして、axiosでPOST
|
|
76
88
|
POSTされたblobファイルを、Laravel API側で処理・保存
|
|
77
89
|
|
|
90
|
+
コントローラー(ImageController.php)で画像を`storage/app/images/`に画像保存
|
|
91
|
+
|
|
78
92
|
というプログラムを書きました。
|
|
79
93
|
|
|
80
|
-
コントローラー(ImageController.php)で画像を`storage/app/images/`に画像保存
|
|
81
|
-
という流れなのです。
|
|
82
94
|
|
|
95
|
+
|
|
83
|
-
axios.postが完了すると、コンソールには'success'と文字が返って来ているので、axios.postは完了していると思っています。
|
|
96
|
+
画像の投稿（axios.post）が完了すると、コンソールには'success'と文字が返って来ているので、axios.postは完了していると思っています。
|
|
84
97
|
コンソールや、debugbarにエラーは出ないのに画像がDBに保存されません。
|
3
テキスト修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
axiosでPOSTした画像が、Laravel
|
|
1
|
+
axiosでPOSTした画像が、Laravel DBに保存されない
|
body
CHANGED
|
File without changes
|
2
テキスト修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
const data = new FormData();
|
|
22
22
|
data.append("images", blob, "image.png");
|
|
23
|
+
// data.append("file", this.file);
|
|
23
24
|
|
|
24
25
|
//'path'というkeyで保存
|
|
25
26
|
axios.post("/api/images", data)
|
|
@@ -30,6 +31,7 @@
|
|
|
30
31
|
new Error(error);
|
|
31
32
|
});
|
|
32
33
|
},
|
|
34
|
+
}
|
|
33
35
|
```
|
|
34
36
|
|
|
35
37
|
コントローラー(ImageController.php)
|
|
@@ -45,7 +47,6 @@
|
|
|
45
47
|
{
|
|
46
48
|
public function store(Request $request)
|
|
47
49
|
{
|
|
48
|
-
|
|
49
50
|
if (request()->file) {
|
|
50
51
|
$file_name = time() . '.' . request()->file->getClientOriginalName();
|
|
51
52
|
request()->file->storeAs('public', $file_name);
|
|
@@ -76,6 +77,8 @@
|
|
|
76
77
|
|
|
77
78
|
というプログラムを書きました。
|
|
78
79
|
|
|
79
|
-
コントローラー(ImageController.php)で
|
|
80
|
+
コントローラー(ImageController.php)で画像を`storage/app/images/`に画像保存
|
|
81
|
+
という流れなのです。
|
|
80
82
|
|
|
83
|
+
axios.postが完了すると、コンソールには'success'と文字が返って来ているので、axios.postは完了していると思っています。
|
|
81
|
-
|
|
84
|
+
コンソールや、debugbarにエラーは出ないのに画像がDBに保存されません。
|
1
コード修正、質問内容修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
axiosでPOSTした画像
|
|
1
|
+
axiosでPOSTした画像が、Laravel API DBに保存されない
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
axiosでPOSTした画像をLaravel APIで保存するプログラム以下を書きました。
|
|
1
|
+
axiosでPOSTした画像をLaravel APIでDBに保存するプログラム以下を書きました。
|
|
2
2
|
|
|
3
3
|
vue.js単一コンポーネント、画像POST用のscriptコード
|
|
4
4
|
|
|
@@ -19,11 +19,10 @@
|
|
|
19
19
|
const blob = new Blob([buffer.buffer], { type: type });
|
|
20
20
|
|
|
21
21
|
const data = new FormData();
|
|
22
|
-
data.append("images", blob, "image.png");
|
|
22
|
+
data.append("images", blob, "image.png");
|
|
23
|
+
|
|
23
|
-
|
|
24
|
+
//'path'というkeyで保存
|
|
24
|
-
axios.post("/api/
|
|
25
|
+
axios.post("/api/images", data)
|
|
25
|
-
headers: { "content-type": "multipart/form-data" },
|
|
26
|
-
})
|
|
27
26
|
.then((res) => {
|
|
28
27
|
console.log("success");
|
|
29
28
|
})
|
|
@@ -46,13 +45,16 @@
|
|
|
46
45
|
{
|
|
47
46
|
public function store(Request $request)
|
|
48
47
|
{
|
|
49
|
-
// ファイル名を取得
|
|
50
|
-
$filename = $request->path->name;
|
|
51
48
|
|
|
52
|
-
|
|
49
|
+
if (request()->file) {
|
|
53
|
-
|
|
50
|
+
$file_name = time() . '.' . request()->file->getClientOriginalName();
|
|
54
|
-
|
|
51
|
+
request()->file->storeAs('public', $file_name);
|
|
52
|
+
|
|
53
|
+
$image = new Image();
|
|
54
|
+
$image->path = 'storage/' . $file_name;
|
|
55
|
+
$image->save();
|
|
56
|
+
|
|
55
|
-
|
|
57
|
+
}
|
|
56
58
|
}
|
|
57
59
|
```
|
|
58
60
|
|
|
@@ -62,7 +64,6 @@
|
|
|
62
64
|
{
|
|
63
65
|
//
|
|
64
66
|
protected $fillable = [
|
|
65
|
-
'title',
|
|
66
67
|
'path',
|
|
67
68
|
];
|
|
68
69
|
}
|
|
@@ -73,18 +74,8 @@
|
|
|
73
74
|
blobをformDataにappendして、axiosでPOST
|
|
74
75
|
POSTされたblobファイルを、Laravel API側で処理・保存
|
|
75
76
|
|
|
76
|
-
というプログラムを書き
|
|
77
|
+
というプログラムを書きました。
|
|
77
78
|
|
|
78
79
|
コントローラー(ImageController.php)でpathを受け取って`storage/app/images/`に画像保存
|
|
79
80
|
|
|
80
|
-
という
|
|
81
|
+
という流れなのですが、画像を送信すると、コンソールにエラーは出ないのに画像がDBに保存されません。
|
|
81
|
-
[500 (Internal Server Error)]
|
|
82
|
-
|
|
83
|
-
laravel-debugbar で確認すると、下記箇所で
|
|
84
|
-
「Trying to get property 'name' of non-object」 というエラーがでて解決出来ません。。。
|
|
85
|
-
```PHP
|
|
86
|
-
public function store(Request $request)
|
|
87
|
-
{
|
|
88
|
-
// ファイル名を取得
|
|
89
|
-
$filename = $request->path->name;
|
|
90
|
-
```
|