Vue.jsブラウザで画像ファイルを選択した時にプレビュー表示がされない。

Question

Vue.js 単一コンポーネントに画像ファイルを選択した時にブラウザでプレビュー（canvasとして）されるコードを書いたのですが、プレビューされません。

画像の選択があった場合に処理を実行したいので、computedに画像ファイルを選択した時にプレビュー表示するscriptを書き、previewImageを返したいので、dataにreturn : null（初期値は無）という考えで書いたのですが、
「app.js:14974 Uncaught TypeError: Cannot read properties of undefined (reading '0')」
となってしまいます。

<template>
  <canvas id="preview"></canvas>
  <input type="file"  name="image" accept="image/*" @change="previewImage(obj.files[0])" />
  <p>
    <input type="text" id="canvas_text" value="我輩は犬である" />
    <button @click="drawText('preview', 'canvas_text')">文字を描く</button>
  </p>
</template>
 
<script>
export default {

  data(){
    return{
      previewImage: null 
    }
  },
  computed: {
    previewImage: function (obj) {
      const fileReader = new FileReader();
      fileReader.onload = function () {
        const canvas = document.getElementById("preview");
        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(obj.files[0]);
    },
  },
  methods: {

    //キャンバスに文字を描く
    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);
    },
  },
};
</script>

どこを修正すればいいのでしょうか？
また、今回の場合、画像の選択があった場合に処理を実行したいので、computed　で良かったのでしょうか？

Answer 1

これで問題ないのでは？そもそも、これテンプレートの時点でルール違反（単一ブロックで括られていない）で、エラーとなるはずですが。

this.$refsを使うことで、毎回選択したファイル情報を取得してくれます（document.querySelectorやgetElementByIdと同じ役割を果たしてくれるので便利）

方法は取得したいタグにrefプロパティを設定するだけです。あとは

this.$refs.設定したプロパティ名

で、任意のDOM内の情報取得し放題です。

<template>
	<div>
  <canvas ref="preview"></canvas>
  <input type="file"  name="image" accept="image/*" ref="selectimage" @change="previewImage" />
  <p>
    <input type="text" id="canvas_text" value="我輩は犬である" />
    <button @click="drawText('preview', 'canvas_text')">文字を描く</button>
  </p>
	</div>
</template>

/*中略*/
methods:{
    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]);
    }
},

Comments

[Fukusuke0604]

コメントありがとうございます。

教えていただいたコードに書き換えると、

var canvas = this.$refs.preview; //canvasタグ

の箇所で、
Uncaught TypeError: Cannot read properties of undefined (reading 'preview')
at FileReader.fileReader.onload

というエラーがコンソールに出て、画像がプレビューされません。

[Fukusuke0604]

/*中略*/　とされている箇所は、

data(){
return{
previewImage: null
}
},

を書くのでしょうか？
上記コードを書くとエラーは消えるのですが、画像はプレビューされません。

[FKM]

canvasタグにref="preview"を記述してますか？それからpreviewImageはメソッド名なのでdataに記述する必要ないですよ。

[Fukusuke0604]

コメントありがとうございます。
何度もすみません。　下記のように書いていますが、画像を選択すると
var canvas = this.$refs.preview; //canvasタグ　の箇所で

app.js:14959 Uncaught TypeError: Cannot read properties of undefined (reading 'preview')
at FileReader.fileReader.onload

というエラーがでます。

<template>
<div>
<canvas ref="preview"></canvas>
<input type="file" name="image" accept="image/*" ref="selectimage" @change="previewImage" />
<p>
<input type="text" id="canvas_text" value="我輩は犬である" />
<button @click="drawText('preview', 'canvas_text')">文字を描く</button>
</p>
</div>
</template>

methods: {
previewImage: function () {
let file = this.$refs.selectimage.files //ファイル情報の取得
const fileReader = new FileReader();
fileReader.onload = function () {
const canvas = this.$refs.preview; //canvasタグ
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]);
},
}

このように書いています。

[FKM]

回答を修正しました。

let file = this.$refs.selectimage.files //ファイル情報の取得
const canvas = this.$refs.preview; //canvasタグ
const fileReader = new FileReader();
fileReader.onload = function () {

の順に書き換えてください。fileReader.onloadイベント内部では認識できなかったです。

[Fukusuke0604]

実装できました。

「this.$refsを使うことで、毎回選択したファイル情報を取得してくれます」ここが全く思い浮かばなかったです。

また、fileReader.onloadイベント内部では認識できない。
ということも、考えも及ばなかったです。

勉強になりました。
何度も本当にありがとうございます。

Answer 2

computedは@changeイベントなどで実行するものではないです。
勝手に実行されており、任意の引数を与えることもできません。
computedは基本的にgetter関数のみと書いてあります。vue2.xでは。
https://jp.vuejs.org/v2/guide/computed.html

watchを使うかmethodsで処理すべきかと。

またdata内とcomputed内とmethods内は同一オブジェクト内のメンバーとして
存在するため、同一の名前を付けることはできないはずです。上書きされてしまう。

ただこれでエラー表示が変わるかどうかはちょっとわからないですね…

コンポーネントは再利用をベースにしているのでidの重複が懸念されるくらいでしょうか。