angular上传文件到本地服务器,Angular文件上传示例

以下为Angular的文件上传示例，分为三个步骤。

步骤一、创建HTML模板 (file-upload.component.html)

简单的创建一个类型为file的input标签，input上添加change事件，用来监控文件的选择。

Choose File

id="file"

(change)="handleFileInput($event.target.files)">

步骤二：在TypeScript文件里添加文件上传的处理 (file-upload.component.ts)

定义一个变量用于存放选择的文件：fileToUpload: File = null;

新建chang事件的处理函数：

handleFileInput(files: FileList) {

this.fileToUpload = files.item(0);

}

如果要处理多文件选择，则可以遍历此文件数组。 现在通过调用file-upload.service创建文件上传功能：uploadFileToActivity() {

this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {

// 上传成功处理

}, error => {

console.log(error);

});

}

步骤三、文件上传服务 (file-upload.service.ts)

通过POST方法上传文件，使用FormData，这样就可以将文件使用http请求。postFile(fileToUpload: File): Observable {

const endpoint = 'your-destination-url';

const formData: FormData = new FormData();

formData.append('fileKey', fileToUpload, fileToUpload.name);

return this.httpClient

.post(endpoint, formData, { headers: yourHeadersConfig })

.map(() => { return true; })

.catch((e) => this.handleError(e));

}

到此，一个简单使用的文件上传就实现了。