Laravel + Vue.js +axios でデータがPOSTできない。

Question

Laravel + Vue.js +axios で　２つの関数、saveCanvas（）と、postArticle（）を
<button @click="saveCanvas('preview');postArticle()">で、POSTを実行したいです。
それぞれの関数は以下のように書いています。

<canvas>タグに文字を描画してaxios経由でPOSTする関数

    // Canvasのデータをblob化 axiosでPOST
    saveCanvas: function (canvas_id) {
      const type = "image/png";
      const canvas = document.getElementById(canvas_id);
      const dataurl = canvas.toDataURL("image/jpeg", 0.85);
      const bin = atob(dataurl.split(",")[1]);
      const buffer = new Uint8Array(bin.length);
      for (let i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
      }

      const blob = new Blob([buffer.buffer], { type: type });

      const data = new FormData();
      data.append("images", blob, "png");
      
      axios
        .post("/api/images", data)
        .then((res) => {
          console.log("success");
        })
        .catch((error) => {
          new Error(error);
        });

    },

inputタグ name=titleとcommentをaxios経由でPOSTする関数

    postArticle: function (){
      var article = {
        "title": this.title,
        "comment": this.comment,
      };

      axios
      .post("/api/images", article)
      .then((res) =>{
        console.log("success2");
      })
       .catch((error) => {
          new Error(error);
        });
    },

上記２つの関数、それぞれ単体ではDBに保存（POST）ができるのですが、buttonに２つの関数をまとめると、postArticle（）関数からデータが送れません。（title とcommentがNullとなる）

axios経由で２つの関数をPOSTする事はできないのでしょうか？

また、その場合、どのようにまとめればいいのかわかりません。
アドバイスお願いします。

Vue.jsの単一コンポーネントは以下のように書いています。

<template>
  <div>
    <!-- 画像エリア -->
    <div id="image_area">
      <canvas ref="preview" id="preview"></canvas>
      <input type="file" name="image" accept="image/*" ref="selectimage" @change="previewImage"/>
    </div>
    <p>
      <input type="text" id="canvas_text" value="" />
      <button type="button" @click="drawText('preview', 'canvas_text')">
        文字を描く
      </button>
    </p>

    <!-- タイトル入力 -->
    <div>
      <input id="title" v-model="title" type="text" name="title" placeholder="タイトル">
    </div>
    <div>
    <!-- コメント入力エリア -->
      <textarea id="comment" name="comment" cols="30" rows="10" v-model="comment" placeholder="コメント入力"></textarea>
    </div>
    <button @click="saveCanvas('preview');postArticle()">アップロード</button>

  </div>
</template>
 
<script>
export default {
  methods: {
    // canvasの画像をinput type="file"にプレビュー
    previewImage: function () {
      let file = this.$refs.selectimage.files; //ファイル情報の取得
      const canvas = this.$refs.preview; //canvasタグ
      const fileReader = new FileReader();
      fileReader.onload = function () {
        const ctx = canvas.getContext("2d");
        const image = new Image();
        image.src = fileReader.result;
        image.onload = function () {
          canvas.width = image.width;
          canvas.height = image.height;
          ctx.drawImage(image, 0, 0);
        };
      };
      fileReader.readAsDataURL(file[0]);
    },

    //キャンバスに文字を描く
    drawText: function (canvas_id, text_id) {
      const canvas = document.getElementById(canvas_id);
      const ctx = canvas.getContext("2d");
      const text = document.getElementById(text_id);
      //文字のスタイルを指定
      ctx.font = "32px serif";
      ctx.fillStyle = "#404040";
      //文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
      ctx.textBaseline = "center";
      ctx.textAlign = "center";
      //座標を指定して文字を描く（座標は画像の中心に）
      const x = canvas.width / 2;
      const y = canvas.height / 2;
      ctx.fillText(text.value, x, y);
    },

    // Canvasのデータをblob化 axiosでPOST
    saveCanvas: function (canvas_id) {
      const type = "image/png";
      const canvas = document.getElementById(canvas_id);
      const dataurl = canvas.toDataURL("image/jpeg", 0.85);
      const bin = atob(dataurl.split(",")[1]);
      const buffer = new Uint8Array(bin.length);
      for (let i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
      }

      const blob = new Blob([buffer.buffer], { type: type });

      const data = new FormData();
      data.append("images", blob, "png");
      
      axios
        .post("/api/images", data)
        .then((res) => {
          console.log("success");
        })
        .catch((error) => {
          new Error(error);
        });

    },


    //inputタグ name=title,commentをPOST
    postArticle: function (){
      var article = {
        "title": this.title,
        "comment": this.comment,
      };

      axios
      .post("/api/images", article)
      .then((res) =>{
        console.log("success2");
      })
       .catch((error) => {
          new Error(error);
        });
    },


  },
};
</script>
 

Answer 1

var that = this
axios
  .post("/api/images", data)
  .then((res) => {
    console.log("success");
    that.postArticle();
  })
  .catch((error) => {
    new Error(error);
  });

はどうですか？

もしできなかったら
二つ関数を実行する関数をまた作り上げればどうですか？

upload: function(){
   saveCanvas('preview');
   postArticle()
}

Comments

[Fukusuke0604]

コメントありがとうございます。
２つとも試したのですが、

一つ目にご提案は以下のように書いたのですが、titleとcommentがやはりNullになります。

<button @click="saveCanvas('preview')">アップロード</button>
<script>
export default {
methods: {

// Canvasのデータをblob化 axiosでPOST
saveCanvas: function (canvas_id) {
　　///中略////
const data = new FormData();
data.append("images", blob, "png");

var that = this

axios
.post("/api/images", data)
.then((res) => {
console.log("success");
that.postArticle();
})
.catch((error) => {
new Error(error);
});

},

//inputタグ name=title,commentをPOST
postArticle: function (){
var article = {
"title": this.title,
"comment": this.comment,
};
},
</script>

[Fukusuke0604]

2つ目のご提案は、以下のように書いたのですが、 upload:()=>{}内の saveCanvas('preview');で
saveCanvas is not defined となります。

<button @click="upload()">アップロード</button>

<script>
export default {
methods: {
// Canvasのデータをblob化 axiosでPOST
saveCanvas: function (canvas_id) {
　　　//中略//
},

//inputタグ name=title,commentをPOST
postArticle: function (){
　　　//中略//
},

//2つの関数をまとめる
upload:()=>{
saveCanvas('preview');
postArticle();
},

},
};
</script>

[skys215]

一つ目に対して、titleとcommentはvueのdataに定義してありますか？
二つ目に対して、this.saveCanvas('preview'); this.postArticle();で試してください。

[Fukusuke0604]

コメントありがとうございます。一つ目に対して、

data(){
return {
title:"",
comment:""
}
},

を追記しても、、titleとcommentがやはりNullになります。
crhomeのデベロッパーツールは「status of 500」のエラーが出ています。

二つ目に対して、this.を追加しましたが、結果変わらず、 upload:()=>{}内の saveCanvas('preview');で
saveCanvas is not defined となります。

1つ目の提案はグローバルスコープ内で関数postArticle();をsaveCanvas('preview'); 内の変数thatに渡して、saveCanvas('preview');のaxios内で同時にPOSTするようにし@click="saveCanvas('preview');postArticle()でPOST

2つ目の提案は２つの関数を一つの関数upload()にまとめて @click="upload()でPOST

といいう趣旨だと思うのですが、いずれもうまくいきませんでした。
おかしなことがあればご指摘くださいl

[skys215]

https://jsfiddle.net/skys215/gbysracd/2/
JsFiddleでテストしました。
一つ目は試しましたけど、nullにはなりませんでした。
二つ目はupload:()=>{ だとthisは上書きされますので、upload: function() {にしないとthisは使えません。

[Fukusuke0604]

ありがとうございます！確認します!!

[Fukusuke0604]

返信遅くなりすみません。本当にうまくいかなくて時間がかかったのですが、POSTできなかった原因は、公式ドキュメントに、「Vue が適切な this の値を束縛するのを防ぐため、 methods を定義する際にはアロー関数を使うのは避けるべきです。」とあるように、アロー関数を使用していたのが原因でした。

アロー関数で書いていた箇所を修正後、教えていただいた２つの方法でもPOSTできました。
ありがとうございました！