質問編集履歴
1
説明追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -46,6 +46,36 @@
|
|
|
46
46
|
|
|
47
47
|
どうすれば、Vueテンプレートファイルにて作成したPOSTの内容をaxios経由でLaravel DBへ保存。その後Viewファイルにリダイレクトさせて最新の投稿1件を表示させることができるでしょうか？
|
|
48
48
|
|
|
49
|
+
vueテンプレートファイルのメソッドは以下の様に書いています。
|
|
50
|
+
```javascript
|
|
51
|
+
//////////Canvasのデータをblob化/title/commentをaxiosでPOST//////////
|
|
52
|
+
let saveCanvas = (canvas_id) => {
|
|
53
|
+
const type = "image/png";
|
|
54
|
+
const canvas = document.getElementById(canvas_id);
|
|
55
|
+
const dataurl = canvas.toDataURL("image/jpeg", 0.85);
|
|
56
|
+
const bin = atob(dataurl.split(",")[1]);
|
|
57
|
+
const buffer = new Uint8Array(bin.length);
|
|
58
|
+
for (let i = 0; i < bin.length; i++) {
|
|
59
|
+
buffer[i] = bin.charCodeAt(i);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
const blob = new Blob([buffer.buffer], { type: type });
|
|
63
|
+
|
|
64
|
+
//new FormData() を作成
|
|
65
|
+
const data = new FormData();
|
|
66
|
+
data.append("canvas", blob, "png");
|
|
67
|
+
data.append("title", title.value);
|
|
68
|
+
data.append("comment", comment.value);
|
|
69
|
+
|
|
70
|
+
axios
|
|
71
|
+
.post("/api/images", data)
|
|
72
|
+
.then((res) => {
|
|
73
|
+
console.log("success");
|
|
74
|
+
})
|
|
75
|
+
.catch((error) => {
|
|
76
|
+
new Error(error);
|
|
77
|
+
});
|
|
78
|
+
};
|
|
79
|
+
```
|
|
49
80
|
|
|
50
81
|
|
|
51
|
-
|