NPM 包 ngx-uploader-th 使用教程

前言

当今 Web 开发中，文件上传已成为常见需求之一。传统的文件上传方式一般都是采用 HTML 的 form 标签的 enctype=multipart/form-data 类型，这种方式简单、易实现，但用户体验却不尽如人意，通常需要等待上传过程完成后再得到响应结果。

目前，在前端文件上传方面，有很多优秀的解决方案，其中一种就是采用 ngx-uploader-th 这个 NPM 包。它为我们提供了一种简便、可依赖的文件上传方式。

下面，我们就来一起学习如何使用 ngx-uploader-th 这个 NPM 包。

环境

在学习 ngx-uploader-th 之前，需要先准备好以下环境：

  • Angular CLI
  • Node.js(v10.16.3 及以上版本)
  • npm/npmCi

安装

ngx-uploader-th 可以通过 npm 包管理器很容易地安装：

--- ------- --------------- ------

引入

在使用 ngx-uploader-th 之前，我们需要在 app.module.ts 文件中引入 ngx-uploader-th 的 FileUploadModule。

  ------ - ---------------- - ---- ------------------
  ---
  -----------
    ---
    -------- -
      ---
      -----------------
      ---
    --
    ---
  --
  ------ ----- --------- - -

上传图片

接下来，我们来演示一下如何使用 ngx-uploader-th 进行图片上传。首先，在组件 HTML 中添加文件上传组件：

---- --------------------
  --------------
  ------ ----------- --------------- ------------- -----------------------
  ------- ------------- ---------- ------------ ------------------------------------------
  ------- ------------- ---------- ------------ ------------------------------------------
------

接下来，在组件 ts 中进行实现：

------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------- -------- - ---- ------------------

------------
  --------- -------------
  ------------ --------------------------
  ---------- --------------------------
--
------ ----- --------------- ---------- ------ -

  ------ --------- ------------ - --- -------------- ---- ------------------------------ ---

  ---------- -
  -

  ------ ----------- -
    --------------------------
  -

  ------ ----------- -
    --------------------------
  -

-

其中，我们定义了一个名为 uploader 的 FileUploader 对象，它提供了多种方法和属性，可以用于进行文件上传操作。

通过 uploader.uploadAll() 方法，我们可以上传指定的文件，而通过 uploader.cancelAll() 方法，我们可以取消当前正在上传的文件。

上传文件类型限制

在实际开发过程中，往往需要对上传文件的类型进行限制，以确保上传的文件符合需求，并且不会给系统带来不必要的压力。

通过 ngx-uploader-th，可以轻松实现这一目标。下面，我们来演示一下如何进行文件类型限制。

首先，需要在组件 HTML 中改进代码：

---- --------------------
  --------------
  ------ ----------- --------------- ------------- --------------------- ---------------------------- --
  ------- ------------- ---------- ------------ ------------------------------------------
  ------- ------------- ---------- ------------ ------------------------------------------
------

这里，我们通过 accept 属性对文件类型进行了限定，只允许上传 jpg，png，gif，bmp 类型的文件。

接下来，我们需要在组件文件中添加一些代码进行实现：

------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------- -------- - ---- ------------------

------------
  --------- -------------
  ------------ --------------------------
  ---------- --------------------------
--
------ ----- --------------- ---------- ------ -

  ------ --------- ------------ - --- --------------
    ---- -------------------------------
    ---------------- -------------- ------------ ------------ -------------
    ------------ -----------
  ---

  ---------- -
  -

  ------ ----------- -
    --------------------------
  -

  ------ ----------- -
    --------------------------
  -

-

其中，我们通过 allowedMimeType 属性和 maxFileSize 属性对文件类型和文件大小进行了限制。

上传进度条

最后，在进行文件上传时，我们往往需要对上传进度进行监控，并对当前上传进度进行展示，以优化用户体验。通过 ngx-uploader-th，我们可以很容易地实现这一目标。

在组件 HTML 中改进代码：

---- -------------------------
  ---- --------------------
    --------------
    ------ ----------- --------------- ------------- -----------------------
    ------- ------------- ---------- ------------ ------------------------------------------
    ------- ------------- ---------- ------------ ------------------------------------------
    ---
  ------
------

这里，我们添加了一个新的 div 容器，并对样式进行了改进。

接着，在组件 ts 中添加代码：

------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------- -------- - ---- ------------------

------------
  --------- -------------
  ------------ --------------------------
  ---------- --------------------------
--
------ ----- --------------- ---------- ------ -

  ------ --------- ------------ - --- -------------- ---- ------------------------------ ---

  ---------- -
    ---------------------------- - ---------- --------- --------- ---- -- -
      --------------------- ---------- ----------
    -
  -

  ------ ----------- -
    --------------------------
  -

  ------ ----------- -
    --------------------------
  -

-

这里，我们在 ngOnInit() 方法中添加了 onProgressItem 事件方法，用于监控上传进度，并在控制台打印出当前上传进度。

最后，在组件 css 中添加代码：

------------ -
  ------ ------
  ------- ------
  ------- ------ --- -----
  -------------- -----
  ----------- -------
-
---------------------- -
  ------------- --------
-
----------------- -
  --------- ---------
  -------- ----
  ------- - -----
  ---------- -------
-
------------- -
  ------- -----
  -------------- ----
-

这里，我们对进度条的样式进行了一些调整。

至此，ngx-uploader-th 的使用已经结束。通过学习，我们熟悉了文件上传的流程，并学习了如何通过 ngx-uploader-th 快速实现文件上传、上传进度监听以及上传文件类型限制等操作。

完整代码如下：

------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------- -------- - ---- ------------------

------------
  --------- -------------
  ------------ --------------------------
  ---------- --------------------------
--
------ ----- --------------- ---------- ------ -

  ------ --------- ------------ - --- --------------
    ---- -------------------------------
    ---------------- -------------- ------------ ------------ -------------
    ------------ -----------
  ---

  ---------- -
    ---------------------------- - ---------- --------- --------- ---- -- -
      --------------------- ---------- ----------
    -
  -

  ------ ----------- -
    --------------------------
  -

  ------ ----------- -
    --------------------------
  -

-
---- -------------------------
  ---- --------------------
    --------------
    ------ ----------- --------------- ------------- -----------------------
    ------- ------------- ---------- ------------ ------------------------------------------
    ------- ------------- ---------- ------------ ------------------------------------------
    ---- ----------- ---- -- ----------------
      ---- -----------------
        ---- -------------------- ---------------------------- - -----------
      ------
    ------
  ------
------

-------
------------ -
  ------ ------
  ------- ------
  ------- ------ --- -----
  -------------- -----
  ----------- -------
-
---------------------- -
  ------------- --------
-
----------------- -
  --------- ---------
  -------- ----
  ------- - -----
  ---------- -------
-
------------- -
  ------- -----
  -------------- ----
-
--------

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056dc881e8991b448e718c

阅读全文

猜你喜欢

  • npm 包 english-nysiisphonetic 使用教程

    英语中有很多发音相似的单词，为了便于计算机处理，我们需要将它们转换成一种统一的格式。在这篇文章中，我将介绍使用 npm 包 english-nysiisphonetic 将英语单词转换为 NYSIIS...

    3 年前
  • npm 包 english-soundexphonetic 使用教程

    介绍 english-soundexphonetic 是一个 npm 包，用来通过英语单词生成其 Soundex phonetic 码。Soundex 是一种将单词转化为其语音发音相似的代码的算法，可...

    3 年前
  • npm 包 english-soundexsqlphonetic 使用教程

    英语语言中的拼写和语音存在变化，这对于一些对英语语言处理相关的业务而言是个挑战。Soundex SQL Phonetic 算法就是一种解决这个问题的方法。本文将介绍 npm 包 english-sou...

    3 年前
  • npm 包 @mycolorway/tao_editor 使用教程

    前言 在前端开发中，文本编辑器是一个重要的工具。在选择文本编辑器时，我们需要考虑编辑器的功能、兼容性、易用性等因素。而本文要介绍的 @mycolorway/tao_editor 就是一款强大的文本编辑...

    3 年前
  • npm 包 homebridge-thingspeak 使用教程

    前言 在物联网的发展趋势下，越来越多的人开始构建自己的智能家居系统。而其中一个重要的组成部分就是家庭自动化系统。而其中，HomeBridge 是很受欢迎的一个开源项目，可以让家里的产品与 Siri 进...

    3 年前
  • NPM 包 supi-glitch 使用教程

    背景 supi-glitch 是一个开源的 NPM 包，它提供了一些在前端开发中非常有用的功能，例如图片及视频的滤镜效果、抖动、颜色空间转换等等。在这篇文章中，我们将学习如何在你的项目中使用 supi...

    3 年前
  • npm 包 yolo-cli 使用教程

    yolo-cli 是一个基于命令行的工具，它可以帮助我们快速创建一个基于 webpack 的简易前端开发环境，并且可以自动监听文件变化并实时编译打包代码。在这篇文章中，我们将学习如何使用这个工具来创建...

    3 年前
  • npm 包 my-demo-component 使用教程

    my-demo-component 是一个基于 React 的前端 UI 组件库，可以用于快速搭建符合标准的前端应用程序。本文将为大家介绍如何使用和定制 my-demo-component。

    3 年前
  • npm 包 my-demo-component-lib 使用教程

    npm 包 my-demo-component-lib 使用教程 前言 随着前端技术的不断进步，我们日常的开发中常常需要使用一些常用的组件库来提高效率和代码质量。为了满足这种需求，npm 上涌现出了很...

    3 年前
  • npm 包 if-newer 使用教程

    npm 包 if-newer 是一个非常有用的工具，它可以让你在本地开发时，自动检测你的项目依赖的 npm 包是否有新版本。如果有新版本，就会自动安装更新。 下面我们来详细介绍一下如何使用 if-ne...

    3 年前
  • npm 包 koth-node 使用教程

    近年来，前端技术迅猛发展，前端开发面临着越来越多复杂的业务场景和技术难题。不少工具和框架在这样的背景下应运而生，npm 作为前端开发最常用的包管理器之一，无疑在前端开发中扮演了重要角色。

    3 年前
  • npm 包 @cbank/cryptopia 使用教程

    介绍 @cbank/cryptopia 是一个用于在 Cryptopia 交易所上进行交易的 npm 包。该包基于官方的 API 开发，使得在编写 Cryptopia 交易机器人或自动交易脚本时更加便...

    3 年前
  • npm包apollo-cant-cache-me使用教程

    介绍 apollo-cant-cache-me是一个npm包，它为Apollo Client提供了可以从缓存中排除部分查询的能力。这对于那些需要确保某些查询永远不会从缓存中读取结果的情况非常有用，例如...

    3 年前
  • NPM 包 Process-js 使用教程

    在前端开发中，我们常常需要使用处理数据的工具包。其中比较常用的一个就是 Process-js 这个 NPM 包。本篇文章将会从使用，学习以及指导意义三个方面来详细介绍此包的使用方法。

    3 年前
  • npm 包 rsa-key 使用教程

    简介 在前端开发中，数据加密和解密是必不可少的操作，其中 RSA 非对称加密算法应用较广泛。而在使用 RSA 算法时，需要生成密钥对，即公钥与私钥。npm 包 rsa-key 就是一款用于生成 RSA...

    3 年前
  • npm 包 rsa-key-es5 使用教程

    简介 在前端开发过程中，加密和解密是一个基本的需求。其中，RSA 非对称加密算法是一种广泛使用的加密算法，其原理简单而且安全。rsa-key-es5 是一个基于 RSA 算法的 npm 包，它提供了一...

    3 年前
  • npm包zinky-filer使用教程

    简介 npm是Node.js的包管理器，方便JavaScript开发者在项目中引入第三方模块，zinky-filer就是其中之一，它为前端开发者提供了文件上传、文件下载、文件预览以及文件处理等一系列的...

    3 年前
  • npm 包 aniq 使用教程

    aniq 是一个非常方便的 npm 包，可以帮助我们轻松地实现各种动画效果。本文将详细介绍 aniq 的使用方法，包括如何安装、如何使用以及如何自定义动画等内容。 安装 安装 aniq 很简单。

    3 年前
  • npm 包 promisify-generator 使用教程

    什么是 promisify-generator? 当我们使用 generator 函数时，需要手动在每个函数返回 promise，并在每个错误处理块中编写相似的代码。

    3 年前
  • npm 包 passport-local-postgres 使用教程

    在开发 web 应用程序时，我们通常需要实现用户身份验证功能，而 Passport.js 是一个非常流行的用户验证中间件。 Passport.js 支持多种本地验证的策略，其中 passport-lo...

    3 年前

相关推荐

    暂无文章