vue electron read file

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <div v-if="fileContent">{{ fileContent }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileContent: null,
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.readFileContent(file);
      }
    },
    readFileContent(file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        this.fileContent = event.target.result;
      };
      reader.readAsText(file);
    },
  },
};
</script>

This Vue component includes an input element of type "file" and a div to display the content of the read file. The handleFileChange method is triggered when a file is selected, and it calls the readFileContent method passing the selected file. The readFileContent method uses the FileReader API to read the content of the file as text, and the result is stored in the fileContent data property, which is then displayed in the div.