如何在场景中引用文件时触发回调

function loadFile(url, callback) {
  var file = new XMLHttpRequest();
  file.open("GET", url, true);
  file.onreadystatechange = function () {
    if (file.readyState === 4 && file.status === 200) {
      callback(file.responseText);
    }
  };
  file.send();
}

function handleFileData(data) {
  // 处理文件数据
  console.log(data);
}

var fileUrl = "https://example.com/file.txt";
loadFile(fileUrl, handleFileData);

<template>
  <div>
    <!-- 文件引用 -->
    <img src="file.jpg" v-on:load="handleFileLoad">
  </div>
</template>

<script>
export default {
  methods: {
    handleFileLoad() {
      // 处理文件加载完成事件
      console.log("File loaded");
    },
  },
};
</script>

function loadFile(url) {
  return new Promise(function (resolve, reject) {
    var file = new XMLHttpRequest();
    file.open("GET", url, true);
    file.onreadystatechange = function () {
      if (file.readyState === 4) {
        if (file.status === 200) {
          resolve(file.responseText);
        } else {
          reject(new Error("File load error"));
        }
      }
    };
    file.send();
  });
}

var fileUrl = "https://example.com/file.txt";
loadFile(fileUrl)
  .then(function (data) {
    // 处理文件数据
    console.log(data);
  })
  .catch(function (error) {
    // 处理加载错误
    console.error(error);
  });