Angular 10通过进度事件示例上传多个文件/图像

作者 : IT 大叔 本文共1630个字,预计阅读时间需要5分钟 发布时间: 2020-09-14

上载文件和图像是Web开发中的常见问题,您经常会遇到在应用程序中实现文件上载的要求。取决于您选择的框架或库。例如,在Angular,React或Vue中,您将具有不同的文件上传技术,但是有一些共同点-因为所有这些工具本质上都是基于JavaScript之上的客户端工具-例如使用FormData结构来创建JavaScript或TypeScript中的表单并将多部分数据发送到服务器。

尽管React和Vue.js没有自己的HTTP客户端,但是Angular带有内置的HttpClient,它具有高级功能,例如进度报告和拦截器。

基本上,您可以将Angular HttpClient与FormData一起使用,以将请求发送到服务器以上传单个或多个文件。

您还需要使用各种工件,例如用于封装文件上传代码的Angular服务和用于构建文件上传UI的Angular组件。

用于设计UI。您有多种选择,例如Angular Material,Bootstrap和Tailwind等,其中第一种选择最受欢迎。

在本文中,我们将学习有关文件和图像上传使用的Angular概念,包括有关如何使用最新的Angular 10版本和Bootstrap 4实现文件上传的分步教程。

Angular是用于构建JavaScript客户端应用程序(也称为单页应用程序)的完整平台。它实际上是由Google开发人员团队以TypeScript编写的,并包含用于解决常见Web开发问题(例如发送HTTP请求以及处理表单提交和验证)的内置库。

如何在Angular中上传文件/图像

Angular提供了许多内置模块,可用于上传文件和图像。

根据您的用例需求,您可能需要修改或多或少的代码,但总而言之,这些是应用程序中任何文件上传功能的基础。

FormData:封装文件数据

FormData是HTML5 API,它是现代Web浏览器中内置的,并非特定于Angular。它允许您创建用于存储与HTML表单相对应的键/值对的对象。可以将其视为创建表单以通过HTTP将数据(包括文件)发送到REST API服务器的JavaScript方法。

您可以使用以下代码创建FormData对象:

const formData = new FormData();

创建实例后,可以将需要发送或上传到公开REST API端点的服务器的数据和文件的键值对附加。

HttpClientModule:使用HTTP请求上传文件/图像

HttpClientModule是一个内置模块,其中包含用于发送HTTP请求和从HTTP服务器获取响应的HttpClient服务。它基于所有Web浏览器上都可用的XMLHttpRequest接口。它提供了额外的功能,例如拦截器以及键入的请求和响应。

多文件/图像上传教程

在整个教程中,我们将学习如何使用Angular 10和以前的版本(包括Angular 9,Angular 8和Angular 7)实现多个文件和图像上传。

我们将逐步介绍如何使用Angular CLI生成的进度条构建示例Angular 10应用程序,该进度条的样式为Bootstrap 4,用于上传多个文件或图像。

由于Angular是客户端JavaScript框架,因此我们将使用FormData将文件或图像数据发送到API服务器。

使用Angular 10和FormData实现多个文件上传

在本教程中,您将创建一个Angular 10应用程序,该应用程序允许您将多个文件/图像上传到文件服务器。该应用程序将显示正在上传到服务器的每个文件的进度条。

工具和库

我们将使用以下工具来构建文件上传演示:

  • Angular CLI 10
  • 引导程序4

用于文件上传的REST API服务器端点

在这一部分中,我们不会构建用于文件上传的服务器应用程序,因为这超出了Angular的范围。您可以使用任何服务器端语言来构建REST API服务器,例如使用DjangoFlask的Python,使用Express或PHP的Node.js

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » Angular 10通过进度事件示例上传多个文件/图像

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论