在前端开发中，文件上传是一个非常常见的需求。而对于大文件上传，传统的文件上传方式会出现速度慢、易崩溃等问题。此时，使用前端直传可以有效地解决这一问题。
ngx-presigned-uploader 是一个基于 Angular 的前端直传插件，它可以让我们借助 AWS S3 这样的服务进行多个大型文件的上传，同时也支持断点续传。
本文将介绍 ngx-presigned-uploader 的使用方法和示例代码。
安装
使用 ngx-presigned-uploader 需要先安装：
npm install ngx-presigned-uploader --save
使用
使用 ngx-presigned-uploader 需要配置访问 AWS S3 的密钥和配置，同时，还需要传入上传文件的列表信息。
配置 AWS S3 访问密钥
-- -------------------- ---- -------
------ - --------------------------- - ---- -------------------------
------------------- --------- ---------------------------- --
---------- -
-------------------------
------------ --------------------
---------------- ------------------------
------- -------------
------- ------------
---
-添加上传文件列表
需要指定上传文件的名称和类型，并将文件对象添加到上传列表中。
-- -------------------- ---- ------- ----- ---- - ---------------------- ----- -------- - ---------- ----- -------- - ---------- ----------------------- ----- --------- ----- --------- ----- ---- ---
执行上传
在上传文件列表准备好后，使用以下代码来进行文件上传：
this.uploader.startUpload().then(() => {
console.log('上传完成！');
}).catch((err) => {
console.log(err);
});断点续传
若上传出现异常，可以实现断点续传来恢复上传进度。
在上传的过程中，插件会将上传进度存储在 localStorage 中。在下一次上传时，插件可以读取这些上传进度并继续上传。
显示上传进度
可以使用如下方式来实现上传进度的显示：
this.uploader.progress.subscribe((progress: number) => {
console.log('上传进度：' + progress + '%');
});示例代码
以下为完整的示例代码：
-- -------------------- ---- -------
------ - --------------------------- - ---- -------------------------
------------------- --------- ---------------------------- --
---------- -
-------------------------
------------ --------------------
---------------- ------------------------
------- ------------------
------- -----------------
---
-
------------------- ---- -
----- ---- - ----------------------
----- -------- - ----------
----- -------- - ----------
-----------------------
----- ---------
----- ---------
----- ----
---
-
------------- -
----------------------------------- -- -
---------------------
-------------- -- -
-----------------
---
-
-------------- -
------------------------------------------- ------- -- -
------------------- - -------- - -----
---
-总结
通过本文的介绍，我们学习了如何使用 ngx-presigned-uploader 这个前端直传插件，以及如何通过它实现对于大文件上传的要求。
同时，在日常的开发中，我们可以使用插件的断点续传功能，以及进度显示功能来优化文件上传的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e281e8991b448d776d