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.