Javascript Vue3 関数をアロー関数に書き換えたい

Question

下記のようにアロー関数を用いた書き方をすると
「TypeError: Cannot read properties of undefined (reading '$refs')」
というエラーになります。

// 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]);
    },

アロー関数を用いる前の以下のコードではエラーも出ず正常に動作していました。

    // 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]);
    },