在 Angular 中上傳檔案
- 在 Angular 中匯入庫
- 在 Angular 中匯出元件和宣告變數
-
在 Angular 中使用
basicUpload()
上傳多個檔案 -
在 Angular 中使用
basicUploadSingle()
上傳單個檔案 -
在 Angular 中使用
uploadAndProgress()
上傳多個檔案 -
在 Angular 中使用
UploadAndProgressSingle()
上傳單個檔案 - Angular 呼叫上傳函式
- 概括
我們將介紹如何使用 Angular 上傳檔案的四種不同方法。
我們還將介紹如何在檔案上傳時顯示進度條,並在上傳完成時顯示檔案上傳完成訊息。
在 Angular 中匯入庫
首先,我們將匯入庫併為檔案上傳器設定元件。
# angular
import { Component, VERSION } from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';
@Component({
selector: 'my-app',
template: `
Version = {{version.full}} <br/>
<input type="file" (change)="upload($event.target.files)" />
Upload Percent: {{percentDone}}% <br />
<ng-container *ngIf="uploadSuccess">
Upload Successful
</ng-container>
`,
})
在 Angular 中匯出元件和宣告變數
現在,我們將匯出我們的 AppComponent
並將變數 percentDone
宣告為 number
並將 UploadSuccess
宣告為布林值。我們還將宣告一個呼叫 HttpClient
的建構函式。
# angular
export class AppComponent {
percentDone: number;
uploadSuccess: boolean;
constructor(
private http: HttpClient,
) { }
version = VERSION
在 Angular 中使用 basicUpload()
上傳多個檔案
Angular 有四種不同風格的檔案上傳,多個檔案的 basicUpload()
就是其中之一。可以以這種方式一次上傳多個檔案,而無需顯示任何檔案進度條。
basicUpload(files: File[]){
var formData = new FormData();
Array.from(files).forEach(f => formData.append('file', f))
this.http.post('https://file.io', formData)
.subscribe(event => {
console.log('done')
})
}
我們正在向 https://file.io
傳送上傳請求,可以使用 後端伺服器 URL
進行更改。後端伺服器將接收檔案的上傳資料,它將向上傳的檔案傳送一個 URL。
在 Angular 中使用 basicUploadSingle()
上傳單個檔案
在 Angular 中上傳檔案的第二種樣式是單個檔案的 basicUploadSingle()
。在這種風格中,使用者一次只能上傳一個檔案。此樣式也不會在檔案上傳時顯示進度。
basicUploadSingle(file: File){
this.http.post('https://file.io', file)
.subscribe(event => {
console.log('done')
})
}
在 Angular 中使用 uploadAndProgress()
上傳多個檔案
在 Angular 中上傳檔案的第三種樣式是用於多個檔案的 uploadAndProgress()
。使用者可以以這種方式同時上傳多個檔案,進度條會顯示上傳檔案的百分比。
uploadAndProgress(files: File[]){
console.log(files)
var formData = new FormData();
Array.from(files).forEach(f => formData.append('file',f))
this.http.post('https://file.io', formData, {reportProgress: true, observe: 'events'})
.subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
this.percentDone = Math.round(100 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
this.uploadSuccess = true;
}
});
}
在 Angular 中使用 UploadAndProgressSingle()
上傳單個檔案
在 Angular 中上傳檔案的第四種風格是單個檔案的 uploadAndProgressSingle()
。在這種風格中,使用者可以同時上傳單個檔案,進度條顯示上傳檔案的百分比。
uploadAndProgressSingle(file: File){
this.http.post('https://file.io', file, {reportProgress: true, observe: 'events'})
.subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
this.percentDone = Math.round(100 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
this.uploadSuccess = true;
}
});
}
Angular 呼叫上傳函式
現在我們已經在 angular 中新增了四種樣式的上傳函式,我們可以使用所需的樣式呼叫我們的上傳函式。
upload(files: File[]){
//pick from one of the 4 styles of file uploads below
this.uploadAndProgress(files);
}
輸出:
概括
我們討論了四種不同風格的檔案上傳方式,以及如何在我們的 upload
函式中呼叫它們。完整程式碼如下。
import { Component, VERSION } from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';
@Component({
selector: 'my-app',
template: `
Version = {{version.full}} <br/>
<input type="file" (change)="upload($event.target.files)" />
Upload Percent: {{percentDone}}% <br />
<ng-container *ngIf="uploadSuccess">
Upload Successful
</ng-container>
`,
})
export class AppComponent {
percentDone: number;
uploadSuccess: boolean;
constructor(
private http: HttpClient,
) { }
version = VERSION
upload(files: File[]){
this.uploadAndProgress(files);
}
basicUpload(files: File[]){
var formData = new FormData();
Array.from(files).forEach(f => formData.append('file', f))
this.http.post('https://file.io', formData)
.subscribe(event => {
console.log('done')
})
}
basicUploadSingle(file: File){
this.http.post('https://file.io', file)
.subscribe(event => {
console.log('done')
})
}
uploadAndProgress(files: File[]){
console.log(files)
var formData = new FormData();
Array.from(files).forEach(f => formData.append('file',f))
this.http.post('https://file.io', formData, {reportProgress: true, observe: 'events'})
.subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
this.percentDone = Math.round(100 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
this.uploadSuccess = true;
}
});
}
uploadAndProgressSingle(file: File){
this.http.post('https://file.io', file, {reportProgress: true, observe: 'events'})
.subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
this.percentDone = Math.round(100 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
this.uploadSuccess = true;
}
});
}
}
輸出:
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn