[英]Read a file and parse its content
I have file upload control which holds the selected file as below,我有文件上传控件,其中包含如下选定的文件,
<div class="Block">
<label id="lbl">File </label>
<input #fileInput type='file'/>
</div>
I have a submit button as below,我有一个提交按钮如下,
<button type="button" class="btn btn-primary"
(click)="uploadDocument()">Upload File</button>
When I select a file and click on the upload button the file I need the contents inside the file without sending it to the server and reading from there.当我 select 一个文件并单击上传按钮时,我需要文件中的内容而不将其发送到服务器并从那里读取。
Note: Type of file will be csv
注意:文件类型将为csv
You can use FileReader
in javascript to achieve this as its a csv
file您可以在 javascript 中使用FileReader
将其作为csv
文件来实现
Add a file change event to store the file in a object as below,添加文件更改事件以将文件存储在对象中,如下所示,
<div class="Block">
<label id="lbl">Code </label>
<input type='file' (change)="fileChanged($event)">
</div>
The function should set the file to an object which is used later该函数应将文件设置为稍后使用的对象
file:any;
fileChanged(e) {
this.file = e.target.files[0];
}
When the submit button is clicked you can use the readAsText()
method of FileReader
in javascript to get the content as below,当提交按钮被点击时,您可以使用 javascript 中FileReader
的readAsText()
方法来获取如下内容,
uploadDocument(file) {
let fileReader = new FileReader();
fileReader.onload = (e) => {
console.log(fileReader.result);
}
fileReader.readAsText(this.file);
}
Note : onload
event will be fired after the content is read so your logic should be inside the onLoad
function.注意:在读取内容后将触发onload
事件,因此您的逻辑应该在onLoad
函数内。
you pull the file out of the input and use the FileReader API您将文件从输入中拉出并使用 FileReader API
readFile(file: File) {
var reader = new FileReader();
reader.onload = () => {
console.log(reader.result);
};
reader.readAsText(file);
}
if you want to make it as function you can do如果你想让它成为你可以做的功能
readFileContent(file: File): Promise<string> {
return new Promise<string>((resolve, reject) => {
if (!file) {
resolve('');
}
const reader = new FileReader();
reader.onload = (e) => {
const text = reader.result.toString();
resolve(text);
};
reader.readAsText(file);
});
}
then然后
const fileContent = await readFileContent(file);
For those asking how to get string data after reading it, the data is in the result
property of fileReader
.对于那些询问如何在读取后获取字符串数据的人,数据在fileReader
的result
属性中。 Check the code sample below.检查下面的代码示例。
let fileString:any= "";
uploadDocument(file) {
let fileReader = new FileReader();
fileReader.onloadend = (e) => {
//console.log(myReader.result);
// Entire file
console.log(myReader.result);
// By lines
var lines = myReader.result.split('\n');
for(var line = 0; line < lines.length; line++){
console.log(lines[line]);
}
this.fileString = myReader.result;
};
fileReader.readAsText(this.file);
}
it works, try like this..它有效,试试这样..
var reader = new FileReader();
reader.onloadend =(e) =>{
var result = reader.result;
console.log(i+'/'+result)
this.file64.push(result)
};
reader.readAsDataURL(file);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.