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));

}

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

angular上传文件到本地服务器,Angular文件上传示例相关推荐

scp命令服务器下载文件到本地，scp命令linux拷贝文件到本地,服务器下载文件,scp命令拷贝文件,scp命令文件下载上传到服务器
scp命令文件下载上传到服务器 # 服务器拷贝文件到本地 # # scp 服务器路径文件本地路径文件 scp root@192.168.0.111:/tmp/test.sql D:/share/te ...
dw如何上传文件到本地服务器,dw如何上传到远程服务器
dw如何上传到远程服务器内容精选换一换支持从V2.2.0.V2.2.T2.V2.2.T2.SPC100.V2.2.T2.SPC200.V2.2.T3版本升级到最新版本.已将所需升级的鲲鹏性能分析 ...
[PHP]利用XAMPP搭建本地服务器, 然后利用iOS客户端上传数据到本地服务器中(四. iOS端代码实现)...
一.安装XAMPP http://www.cnblogs.com/lidongxu/p/5256330.html 二. 配置MySql http://www.cnblogs.com/lidong ...
php下载图片保存到临时文件夹,57、PHP将上传到临时文件夹的文件移动到服务器指定文件夹内...
本节用到的文件操作函数: 1.is_uploaded_file() 函数判断指定的文件是否是通过 HTTP POST 上传的. 2.move_uploaded_file() 函数将上传的文件移动到新位 ...
怎么把文件同步到服务器,把文件同步到服务器上
把文件同步到服务器上内容精选换一换当服务器A和服务器B同时挂载同一文件系统C时,在服务器A上传文件,服务器B同步此文件时存在延时,而单独上传至服务器B则没有延时.需要在两个服务器的挂载参数中增加 ...
手机连接服务器传输文件,手机云服务器传输文件
手机云服务器传输文件内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据传 ...
快云服务器在哪个文件夹,云服务器的文件在哪个文件夹
云服务器的文件在哪个文件夹内容精选换一换简要介绍Jetty是一个基于Java的网页服务器和Java Servlet容器.尽管网页服务器通常用来为人们呈现文档,但是Jetty通常在较大的软件框架中 ...
NX二次开发判断外挂是否需要更新，从PTF下载文件（从服务器下载文件）
NX二次开发判断外挂是否需要更新,从PTF下载文件(从服务器下载文件) //电信的宽带很快,移动到宽带要加载好几秒#include <stdio.h> #include <stri ...
常用的xshell命令之从本地上传文件和从服务器下载文件到本地
借助XShell,使用linux命令sz可以很方便的将服务器上的文件下载到本地,使用rz命令则是把本地文件上传到服务器. 如果没有安装,需要执行:[cpp]yum install lrzsz[/cpp ...

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

angular上传文件到本地服务器,Angular文件上传示例相关推荐

最新文章

热门文章