简介
在前端开发中，图片上传功能几乎是必不可少的一部分。而 nguploader 是一个基于 AngularJS 的图片上传插件，它可以帮助开发者在 AngularJS 项目中快速实现图片上传功能。
安装
使用 npm 进行包安装：
npm install nguploader
使用
引入 nguploader
在需要使用 nguploader 的组件中引入 nguploader：
import nguploader from 'nguploader'; import 'nguploader/build/css/nguploader.css';
nguploader 需要引入 css，因此需要额外引入 CSS 文件。
添加 HTML 模板
<nguploader ng-model="fileList" uploader-options="uploaderOptions"></nguploader>
其中，ng-model 绑定上传结果，uploader-options 绑定上传配置。
配置项
uploaderOptions 可以传入多个配置项：
url：上传接口地址；filters：文件过滤操作；autoUpload：是否自动上传；formData：上传请求的额外参数；maxSize：文件大小上限；maxNumber：文件数量上限；accept：指定文件类型；headers：上传请求的 HTTP 头部信息；onUploadSuccess：上传完成后的回调函数；onUploadError：上传失败时的回调函数；onUploadAll：全部上传完成时的回调函数。
文件过滤
this.uploaderOptions.filters = [{
name: 'imageFilter',
fn: function (item, options) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|',
acceptedTypes = '|jpg|jpeg|png|gif|'.indexOf(type.toLowerCase()) !== -1;
return acceptedTypes;
}
}];上面的代码例子中使用了 imageFilter，即只接受 jpg、jpeg、png 和 gif 类型的文件。
自动上传
this.uploaderOptions.autoUpload = true;
开启 autoUpload 后，选择文件后自动触发上传。
Form Data
this.uploaderOptions.formData = {
order_sn: this.order_sn
};可以在 formData 中添加任意键值对作为上传请求数据，例如 order_sn。
文件大小限制
this.uploaderOptions.maxSize = 1024 * 1024;
单位为 bytes，此例中表示文件大小最多为 1 MB。
文件数量上限
this.uploaderOptions.maxNumber = 5;
此例中表示最多上传 5 个文件。
文件类型
this.uploaderOptions.accept = 'image/*';
此例中只接受图片类型文件。
HTTP 头部信息
this.uploaderOptions.headers = {
Authorization: 'Bearer ' + this.token
};添加 HTTP 头部信息（如 token）以便在上传时使用。
回调函数
-- -------------------- ---- ------- ------------------------------------ - -------- ------ ----- - -------------- -- ---------------------------------- - -------- ------ ----- - -------------- -- -------------------------------- - -------- -- - ---------------- --
分别对应上传成功、上传失败、上传全部完成的回调函数。
示例代码
-- -------------------- ---- -------
------ ---------- ---- -------------
------ --------------------------------------
------ ------- -
------ -
------ -
--------- ---
---------------- -
---- --------------------------------
-------- --
----- --------------
--- -------- ------ -------- -
--- ---- - --- - ------------------------------------------ - -- - ----
------------- - ------------------------------------------------ --- ---
------ --------------
-
---
----------- -----
--------- -
--------- -------------
--
-------- ---- - -----
---------- --
------- ----------
-------- -
-------------- ------- - - ----------
--
---------------- -------- ------ ----- -
--------------
--
-------------- -------- ------ ----- -
--------------
--
------------ -------- -- -
----------------
-
-
-
--
----------- -
----------
-
-结语
nguploader 是一款非常实用的图片上传插件，使用简单，功能强大。希望这篇教程能够对 AngularJS 开发者了解和使用 nguploader 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055adc81e8991b448d881f