如何解决输入'文件| null' 不可分配给类型 'File'在角 11
嗨,我是 Angular 的新手,目前我正在使用 Angular 11 项目,我必须上传一个 CSV 文件并在客户端提取文件记录,然后通过 ASP.NET Web API 将它们保存在数据库中。
在这里,我按照教程尝试获取 CSV 文件的 angular 侧数据并将它们显示在同一页面中。
然后我得到这个错误,
输入'文件| null' 不可分配给类型 'File'。 类型 'null' 不可分配给类型 'File'.ts(2322)
我尝试了很多东西,但仍然无法解决这个问题。你能帮我吗?
这是我的 .ts 文件,
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'app-file-upload',templateUrl: './file-upload.component.html',styles: [
]
})
export class FileUploadComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
lines: any = [];
linesR: any = [];
changeListener(files: FileList) {
console.log(files);
if (files && files.length > 0) {
let file: File = files.item(0);
console.log(file.name);
console.log(file.size);
console.log(file.type);
let reader: FileReader = new FileReader();
reader.readAsText(file);
reader.onload = (e) => {
let csv: any = reader.result;
let allTextLines = [];
allTextLines = csv.split(/\r|\n|\r/);
let headers = allTextLines[0].split(';');
let data = headers;
let tarr = [];
for (let j = 0; j < headers.length; j++) {
tarr.push(data[j]);
}
this.lines.push(tarr);
let tarrR = [];
let arrl = allTextLines.length;
let rows = [];
for (let i = 1; i < arrl; i++) {
rows.push(allTextLines[i].split(';'));
}
for (let j = 0; j < arrl; j++) {
tarrR.push(rows[j]);
}
this.linesR.push(tarrR);
}
}
}
}
这是我的 .html 文件
<div class="container">
<h1 style="text-align: center"> File Upload </h1>
<br><br>
<input class="form-control" type="file" class="upload" (change)="changeListener($event.target.files)">
<table class="table table-bordered table-dark">
<thead>
<tr>
<th *ngFor="let item of lines[0]; let i = index">
{{item}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of linesR[0]; let i = index">
<td *ngFor="let itemm of lines[0]; let j = index">
{{item[j]}}
</td>
</tr>
</tbody>
</table>
</div>
谢谢!
解决方法
尝试使用:
fileupload.component.ts
import { Component,OnInit,VERSION } from "@angular/core";
@Component({
selector: 'app-file-upload',templateUrl: './file-upload.component.html',styles: []
})
export class FileUploadComponent implements OnInit {
name = "Angular " + VERSION.major;
lines: any = [];
linesR: any = [];
ngOnInit() {}
changeListener(files) {
let fileList = (<HTMLInputElement>files.target).files;
if (fileList && fileList.length > 0) {
let file: File = fileList[0];
console.log(file.name);
console.log(file.size);
console.log(file.type);
let reader: FileReader = new FileReader();
reader.readAsText(file);
reader.onload = e => {
let csv: any = reader.result;
let allTextLines = [];
allTextLines = csv.split(/\r|\n|\r/);
let headers = allTextLines[0].split(";");
let data = headers;
let tarr = [];
for (let j = 0; j < headers.length; j++) {
tarr.push(data[j]);
}
this.lines.push(tarr);
let tarrR = [];
let arrl = allTextLines.length;
let rows = [];
for (let i = 1; i < arrl; i++) {
rows.push(allTextLines[i].split(";"));
}
for (let j = 0; j < arrl; j++) {
tarrR.push(rows[j]);
}
this.linesR.push(tarrR);
};
}
}
}
fileupload.component.html
<div class="container">
<h1 style="text-align: center">File Upload</h1>
<br /><br />
<input
class="form-control"
type="file"
class="upload"
(change)="changeListener($event)"
/>
<table class="table table-bordered table-dark">
<thead>
<tr>
<th *ngFor="let item of lines[0]; let i = index">
{{item}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of linesR[0]; let i = index">
<td *ngFor="let itemm of lines[0]; let j = index">
{{item[j]}}
</td>
</tr>
</tbody>
</table>
</div>
,
您正在将 strict: true
与打字稿一起使用。那挺好的!不过,您面临的问题是这件作品:
let file: File = files.item(0);
可以返回 undefined,即使您之前检查过长度。这将使类型 File | null
,但您声明它应该只是 File
。
最好将其更改为以下内容:
changeListener(files: FileList) {
const file: File | null = files?.item(0);
if (file) {
// here `file` will have type `File` because it has been asserted with the `if`
console.log(file.size);
console.log(file.type);
let reader: FileReader = new FileReader();
reader.readAsText(file);
reader.onload = (e) => {
//...
,
如果您确定您将在文件项中有值,那么您可以说:
let file: File = files.item(0) as File;
,
我对此没有任何问题:
const file = files.item(0);
if (file && file !== null) {
...
还有这个:
const file: any = files.item(0);
if (file && file !== null) {
...
即使我使用的是 files[0]
而不是 files.item(0)
。而这一切都在 strict
模式下。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。