下記のようにアロー関数を用いた書き方をすると
「TypeError: Cannot read properties of undefined (reading '$refs')」
というエラーになります。
javascript
// canvasの画像をinput type="file"にプレビュー previewImage:() =>{ 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]); },
アロー関数を用いる前の以下のコードではエラーも出ず正常に動作していました。
javascript
// 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]); },
まだ回答がついていません
会員登録して回答してみよう