我有以下代碼：
public upload(): void {
const fileinput = document.getElementById('file');
fileinput.click();
fileinput.addEventListener('change', this.handleFileInput.bind(this));
}
private handleFileInput(event) {
try {
const input = event.target as HTMLInputElement;
const reader = new FileReader();
const { objectId } = this.object;
const file = input.files[0];
reader.onload = () => {
event.target.value = null;
this.objectDetailsService
.upload(file, objectId)
.subscribe(
() => //,
() => //,
);
};
reader.readAsArrayBuffer(file);
} catch (e) {
console.log(e);
}
}
我應該允許有時加載相同的檔案。當用戶選擇另一個此代碼創建為新流。如何避免？
uj5u.com熱心網友回復：
你問如何申請是對的switchMap。一種方法是創建一個 observable 來處理異步回呼onload。然后你可以應用運算子switchMap來呼叫其他異步函式。
另外我建議直接在模板中附加事件處理程式，而不是document.getElementById('file');在控制器中使用。
嘗試以下
* .ts
import { Observable, Observer, timer } from 'rxjs';
import { switchMap } from 'rxjs/operators';
public handleFileInput(event) {
const input = event.target as HTMLInputElement;
const file = input.files[0];
this.readFile(file).pipe(
switchMap((file: any) => {
const { objectId } = this.object;
return this.objectDetailsService.upload(file, objectId);
})
).subscribe({
next: () => console.log('File uploaded'),
error: (error: any) => console.log('Error:', error),
});
}
readFile(file): Observable<any> {
const reader = new FileReader();
reader.readAsArrayBuffer(file);
return new Observable((observer: Observer<any>) => {
reader.onload = (ev: ProgressEvent) => {
observer.next(file);
observer.complete();
};
reader.onerror = (error: any) => {
observer.error(error);
};
});
}
* .html
Select file: <input type="file" (change)="handleFileInput($event)" />
作業示例：Stackblitz
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/332658.html
標籤：javascript 有角的
上一篇：沒有價值的角形貨幣管