前言
在前端开发中，我们经常需要上传图片。为了方便开发和提高效率，我们通常使用一些优秀的第三方库。今天，我们来介绍一个用于 angular2 的图片上传组件——angular2-image-up。
安装
首先，我们需要安装 angular2-image-up。在命令行中输入以下语句：
npm install --save angular2-image-up
接下来，我们需要在 module 中引入声明：
-- -------------------- ---- -------
------ - ----------------- - ---- --------------------
-----------
-------- -
-----------------
--
---
--
------ ----- --------- - -使用
1. 基本用法
在组件中需要使用图片上传时，我们只需要这样：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ------
--------- -
-----------------------------
-
--
------ ----- ------------ - -这样就会在页面上渲染出一个图片上传的组件，你可以拖动图片到组件上，也可以点击选择文件按钮进行上传。
2. 配置选项
angular2-image-up 还支持一些配置选项，可以让我们在上传图片时进行一些自定义设置。以下是一些常用的选项：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- --------------------
------------
--------- ------
--------- -
------------- -----------------------------------
-
--
------ ----- ------------ -
-------- -------------------
------------- -
------------ - -
---- ----------------------------
-------------- -----
---------------- -------------- ------------
-
-
-上面的例子中，我们通过设置 url 选项来指定上传图片的接口地址，通过设置 fileSizeLimit 来限定文件大小上限，通过设置 allowedMimeType 来限制上传的文件类型。
更多可用的选项详见官方文档：
3. 上传服务端处理
angular2-image-up 提供了一些事件和方法，使得我们可以在上传图片的过程中，处理上传成功和上传失败的情况。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- ---------------- - ---- --------------------
------------
--------- ------
--------- -
------------- ------------------- ---------------------------------------------
-
--
------ ----- ------------ -
-------- -------------------
------------- -
------------ - -
---- ---------------------------
-
-
--------------- ----------------- -
-- ------------- -
---------------------
- ---- -
---------------------
-
-
-在上面的例子中，我们通过绑定 onUpload 事件来处理上传成功和失败的情况。
总结
angular2-image-up 是一个非常实用的图片上传组件，首先它非常易于使用，只需要简单引入即可。其次，它支持很多配置选项和上传事件，使得我们可以非常轻松地实现一些自定义的功能。因此，这篇文章对于想要了解如何使用这个组件的前端开发人员来说，可以提供很好的指导意义。
示例代码
完整示例代码可在以下 GitHub 仓库中找到：
https://github.com/valor-software/ng2-file-upload
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609681e8991b448deccc