在现代网站和应用程序中，上传图片和文件是必不可少的功能。Angular 提供了一些内置的上传指令和服务，但它们并不总是能够满足我们的需求。在本文中，我们将介绍一个名为 angular2-image-upload 的 npm 包，它提供了一个非常简单易用的图片上传组件。
安装
安装 angular2-image-upload 很容易，只需使用 npm：
npm install angular2-image-upload --save
使用
首先，让我们在 app.module.ts 中导入 Angular2ImageUploadModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------------- - ---- ------------------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
-------------------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -然后，我们可以在我们的组件模板中使用 image-upload 指令：
-- -------------------- ---- ------- ------------- --------- ------------------------ ---------------- ------------------------- ---------------------------- ------------------------------- --------------------- ------- ------- --------------------------------------- ---------------
在这个例子中，我们为上传指定了一些选项，如最大文件数、文件大小、文件类型等等。同时，我们还指定了一个 URL 作为上传后端的地址。当然，这只是一个简单的例子，我们还可以通过事件监听器来获取上传的进度和结果。
最后，我们需要为上传指定请求头和参数：
-- -------------------- ---- ------- ----------------------- ---- - ----- -------- - --------------------------------------- --------------- - -------------------- - --------------------- ---- - ---------------------------------------- ------------------- ------------------------------------------- ------- - - ----------------------------- -
在这个例子中，我们为上传方法添加了两个事件监听器。onUploadFinished 方法从服务器响应中读取对象，其中包含了预览 URL。onBeforeUpload 方法将请求头和参数添加到上传请求中。
结论
在本文中，我们介绍了如何使用 angular2-image-upload NPM 包来实现简单的图片上传组件。这个包不仅易于使用，而且提供了一些额外的特性，如文件大小、文件类型、进度和结果监听等等。如果你在你的项目中需要一个简单可靠的图片上传组件，你应该考虑使用 angular2-image-upload。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005527c81e8991b448cff7a