利用Angular的组件式开发,将附件上传功能做成独立的一个模块,在其他功能中可以共用这个组件。
本示例只实现单文件上传功能。
hmtl代码
<div class="col-sm-12 uploadBody">
<div class="uploadHeader">
<span>上传文件</span>
</div>
<hr class="hr hr-dash"/>
<div class="uploadContent">
<div class="file-box">
<input type="file" class="file-btn" (change)="handleFileInput($event.target.files)"/>选择文件
</div>
<input class="showFileName" disabled [value]="fileName" placeholder="请选择文件">
</div>
<hr class="hr"/>
<div class=" ModelButtonGroup">
<button class="btn defalut-btn" (click)="cancel()">取消</button>
<button class="btn submit-btn" (click)="confirmUpload()">上传</button>
</div>
</div>
ts代码
token: string;
fileName: string;
fileToUpload: File = null;
constructor(private toastr: ToastrService,
private qiniuService: QiniuService) {
}
handleFileInput(files: FileList) {
this.fileName = files[0].name
this.fileToUpload = files.item(0);
}
cancel () {
this.dialogRef.close();
}
confirmUpload() {
if (!this.fileToUpload) {
this.toastr.error('请选择一个文件');
return false;
}
this.qiniuService.postFile(this.fileToUpload, this.token).subscribe(data => {
console.log(data);
this.dialogRef.close(data);
});
}
service代码
postFile(fileToUpload: File, token: string): Observable<any> {
const endpoint = 'http://upload.qiniup.com/';
const formData = new FormData();
formData.append('file', fileToUpload);
formData.append('key', fileToUpload.name);
formData.append('token', token);
return this.httpClient.post(endpoint, formData);
}
参考
使用Angular构建上传
谷歌“Angular 七牛”第一个结果就是这篇官方文档,通俗易懂。百度出来的结果就不吐槽了。