要在Angular 8中使用post multipart/form-data上传FileReader.readAsDataURL的结果,你可以按照以下步骤操作:
file-saver
和@ngrx/store
库。这里使用file-saver
库将文件保存到本地,@ngrx/store
库用于管理应用状态。npm install file-saver @ngrx/store
file-upload.service.ts
),用于处理文件上传逻辑。在该服务中,你需要创建一个FormData
对象,并将文件数据添加到该对象中。import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import { saveAs } from 'file-saver';
@Injectable()
export class FileUploadService {
constructor(private store: Store) {}
uploadFile(file: File) {
const formData = new FormData();
formData.append('file', file);
// 发送FormData对象到服务器
// 此处省略发送逻辑
// 读取文件数据为Data URL
const reader = new FileReader();
reader.onload = (event: any) => {
const dataUrl = event.target.result;
this.store.dispatch({ type: 'SET_FILE_DATA_URL', payload: dataUrl });
};
reader.readAsDataURL(file);
}
downloadFile(dataUrl: string, fileName: string) {
const blob = this.dataURLtoBlob(dataUrl);
saveAs(blob, fileName);
}
private dataURLtoBlob(dataUrl: string) {
const arr = dataUrl.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
}
uploadFile()
方法来上传文件,并在文件读取完成后,将数据URL保存到状态管理中。import { Component } from '@angular/core';
import { FileUploadService } from './file-upload.service';
@Component({
selector: 'app-file-upload',
template: `
`,
})
export class FileUploadComponent {
constructor(private fileUploadService: FileUploadService) {}
onFileSelected(files: FileList) {
const file = files[0];
this.fileUploadService.uploadFile(file);
}
download() {
const dataUrl = this.fileUploadService.getFileDataUrl();
const fileName = 'file.txt';
this.fileUploadService.downloadFile(dataUrl, fileName);
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { FileUploadComponent } from './file-upload.component';
import { FileUploadService } from './file-upload.service';
@NgModule({
declarations: [FileUploadComponent],
imports: [BrowserModule, StoreModule.forRoot({})],
providers: [FileUploadService],
bootstrap: [FileUploadComponent],
})
export class AppModule {}
这样,你就可以在Angular 8中使用post multipart/form-data上传FileReader.readAsDataURL的结果了。当用户选择文件后,文件将被上传到服务器,并且文件的数据URL将保存在状态管理中。你还可以通过调用download()
方法来下载文件。