在前端开发中，文件上传是常见的需求之一。其中，ngl-upload 是一个方便易用的 npm 包，它提供了许多功能强大的文件上传选项。在本篇文章中，我们将会详细介绍 ngl-upload 的使用方法。
安装 ngl-upload
你可以通过 npm 安装 ngl-upload：
npm install ngl-upload --save
当然，你也可以通过引入 CDN 来使用：
<script src="//cdn.jsdelivr.net/npm/ngl-upload/dist/ngl-upload.min.js"></script>
开始使用
首先，在 HTML 文件中引入 ngl-upload 的依赖关系。
<script src="/path/to/js/jquery-3.3.1.min.js"></script> <script src="/path/to/js/ngl-upload.js"></script>
接下来，在 input[type=file] 元素上绑定事件，以指定上传选项。
<input type="file" id="my_file_input">
$('#my_file_input').upload({
url: '/upload',
method: 'POST',
addFiles: function (e, data) {
console.log(data);
}
});以上代码将添加一个 “addFiles” 事件监听器，它会在选中文件之后调用。事件监听器的第二个参数是一个数组，其中包含我们选择的所有文件信息。
使用 upload 方法之后，我们就可以通过 send 方法来触发上传操作。
$('#my_file_input').on('click', function () {
$(this).upload('send');
});最后，我们需要设置一些服务器端代码来处理我们的上传数据。
app.post('/upload', function (req, res) {
// 这里就可以把 req.body 中的内容以文件形式写入磁盘或其他存储设备中。
});上传选项
在使用 ngl-upload 的过程中，我们还可以调整一些选项来满足我们的需求。
addFiles
当选中文件之后，执行该函数。
$('#my_file_input').upload({
addFiles: function (e, data) {
console.log(data);
}
});done
上传成功后执行该回调函数。
$('#my_file_input').upload({
done: function () {
console.log('上传成功！');
}
});fail
上传失败后执行该回调函数。
$('#my_file_input').upload({
fail: function () {
console.log('上传失败！');
}
});always
上传完成后，无论成功与否均执行该回调函数。
$('#my_file_input').upload({
always: function () {
console.log('上传结束！');
}
});示例代码
在下面的示例代码中，我们将通过 ngl-upload 对一张图片进行上传，并在上传成功后展示上传的图片。
-- -------------------- ---- -------
------ ----------- -------------------
---- ------------------
------- ------------------------------------------------------------------------
--------
----------------------------
---- ----------
------- -------
--------- -------- --- ----- -
----------------------- ------ - ---------------------------- - ------
--
----- -------- --- ----- -
---------------------
--
----- -------- --- ----- -
---------------------
--
------- -------- --- ----- -
---------------------
-
---
------------------------------- -------- -- -
-----------------------
---
---------结论
ngl-upload 是一个功能强大的 npm 包，在文件上传方面提供了很多便利的选项和方法。相信通过本文的介绍，你已经能够熟练地使用 ngl-upload 进行文件上传了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005595d81e8991b448d6c35