Angular文件上传示例

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

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

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

<div class="form-group">
<label for="file">Choose File</label>
<input type="file"
id="file"
(change)="handleFileInput($event.target.files)">
</div>

步骤二:在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<boolean> {
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));
}

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

版权声明:著作权归作者所有。

相关推荐

笔记示例

欢迎使用码经笔记,简单用法如下:1、编辑器工具栏在哪里?请随便选择文本试一下。hello world!2、怎么上传图片?请回车换行试一下。 3、发布点击右上角的发布按钮发布笔记。建议和问题可以发邮件到pr@majing.io。期待您的参与和宝贵意见。Enjoy it!!!

SwiftUI Alerts的使用示例

SwiftUI里的Alerts可以分为三类:警告对话框(Alert Dialogs)操作列表(Action Sheets)弹窗(Popovers)警告对话框(Alert Dialogs)示例使用SwiftUI,我们可以很容易地使用声明的方式来创建警告框以及定义操作,示例如下:struct AlertView: View { @State private var showingAlert =

笔记示例

欢迎使用码经笔记,简单用法如下:1、编辑器工具栏在哪里?请随便选择文本试一下。2、怎么上传图片?请回车换行试一下。3、发布点击右上角的发布按钮发布笔记。建议和问题可以发邮件到pr@majing.io。期待您的参与和宝贵意见。Enjoy it!!!

笔记示例

欢迎使用码经笔记,简单用法如下:1、编辑器工具栏在哪里?请随便选择文本试一下。2、怎么上传图片?请回车换行试一下。 3、发布如果您想分享笔记,点击右上角的发布按钮。建议和问题可以发邮件到pr@majing.io。期待您的参与和宝贵意见。Enjoy it!!!

CentOS:yum安装rz和sz上传下载文件

安装$sudo yum install -y lrzsz rz使用rz上传本地文件到服务$rz 执行命令后,在弹出框中选择要上传的文件即可。sz下载服务器的文件到本地$sz filepath 设置默认本地上传下载目录SecureCRT软件 -> Options -> session op