我正在尝试以角度读取用户上传的 xml 文件。下面是我的代码:
组件.ts:
convertFileToString(event){
this.uploadXML=event.target.files[0];
let fileReader = new FileReader();
fileReader.onload = (event) =>{this.finalUploadedXML=fileReader.result as String}
fileReader.readAsText(this.uploadXML);
console.log("The contents are:")
console.log(this.finalUploadedXML);
}
index.html
<input type="file" id="uploadInput" (change)="convertFileToString($event)" hidden>
但是当我运行这段代码时,它给了我以下错误:
Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'
我还将
readAsText(this.uploadXML)
修改为 readAsText(this.uploadXML.asInstanceOf[Blob])
但似乎 asInstanceOf
不是文件类型的已知属性。所以我尝试将 uploadXML
的类型从 File
更改为 Blob
,错误仍然存在。我该怎么办?
我今天遇到上传问题。我找到了这个链接。此示例包含您遇到的问题。我为我的项目编辑了 Angular 的代码。它可能对你有帮助。
HTML 代码
<form>
<input type="hidden"
id="MAX_FILE_SIZE"
name="MAX_FILE_SIZE"
value="300000" />
<div>
<label for="fileselect">Files to upload:</label>
<input type="file"
id="file-select"
name="fileselect[]"
multiple="multiple" />
<div id="file-drag">{{ dragDropAreaText }}</div>
</div>
</form>
样式代码
#file-drag {
font-weight: bold;
text-align: center;
padding: 1em 0;
margin: 1em 0;
color: #555;
border: 2px dashed #555;
border-radius: 7px;
cursor: default;
}
#file-drag.hover {
color: #f00;
border-color: #f00;
border-style: solid;
box-shadow: inset 0 3px 4px #888;
}
img {
max-width: 100%;
}
pre {
width: 95%;
height: 8em;
font-family: monospace;
font-size: 0.9em;
padding: 1px 2px;
margin: 0 0 1em auto;
border: 1px inset #666;
background-color: #eee;
overflow: auto;
}
打字稿代码
export class UploadMediaComponent implements OnInit, AfterViewInit {
constructor(
private elementRef: ElementRef
) { }
fileList: any[] = [];
@Input() dragDropAreaText: string = 'Drag and drop files here';
@Input() uploadButtonText: string = 'Browse File';
@Output() mediaUploaded: EventEmitter<any> = new EventEmitter();
ngOnInit() {
}
ngAfterViewInit() {
if (window.File && window.FileList && window.FileReader) {
setTimeout(() => {
this.setEvents();
}, 2000);
}
}
setEvents() {
const fileDragElement = this.elementRef.nativeElement.querySelector('#file-drag');
const fileSelectElement = this.elementRef.nativeElement.querySelector('#file-select');
fileSelectElement.addEventListener('change', this.fileSelectHandler.bind(this));
fileDragElement.addEventListener('dragover', this.fileDragHover.bind(this));
fileDragElement.addEventListener('dragleave', this.fileDragHover.bind(this));
fileDragElement.addEventListener('drop', this.fileSelectHandler.bind(this));
}
fileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
fileSelectHandler(e) {
e.preventDefault();
// cancel event and hover styling
this.fileDragHover(e);
// fetch FileList object
var files = e.target.files || e.dataTransfer.files;
console.log(files)
// process all file objects
for (var i = 0, file; file = files[i]; i++) {
this.parseFile(file);
}
}
parseFile(file) {
console.log(file);
// display an image
if (file.type.indexOf("image") == 0) {
var reader = new FileReader();
reader.onload = (e) => {
console.log(e);
console.log(e.target.result);
file.src = e.target.result;
this.fileList.push(file);
this.mediaUploaded.emit(this.fileList);
}
reader.readAsDataURL(file);
}
// display text
if (file.type.indexOf("text") == 0) {
var reader = new FileReader();
reader.onload = function (e) {
console.log(e);
}
reader.readAsText(file);
}
}
}
不要将
event
作为参数传递给 convertFileToString()
函数,而是传递文件对象。这是因为该函数又被另一个处理文件上传时触发的 change
事件的函数调用。
所以最终的答案是:
convertFileToString(file){
//this.uploadXML=event.target.files[0];
let fileReader = new FileReader();
fileReader.onload = (event) =>{
this.finalUploadedXML=fileReader.result as String
console.log((<FileReader>event.target).result);
}
fileReader.readAsText(file);
console.log("The contents are:")
console.log(this.finalUploadedXML);
}
希望这有帮助。干杯
在“fileReader.readAsText(this.uploadXML)”周围尝试这样的事情
if (typeof this.uploadXML === "object") {
fileReader.readAsText(this.uploadXML);
}