ng2-resumable 是一个基于 Angular 的可恢复文件上传服务，它应用了 Resumable.js 以支持可暂停/恢复文件上传，并且使用 RxJS 以支持可观察且自定义的流控制。如果你想要在你的 Angular 项目中上传大文件并且希望支持可暂停和恢复功能的话，ng2-resumable 会是一个很好的选择。在本篇文章中，我们将会学习如何安装和使用 ng2-resumable 并且调整其参数以实现更好的文件上传体验。
环境要求
在开始使用 ng2-resumable 之前，请确保你已经熟悉并且安装了下面所列的环境和工具：
- Node.js v10.15+
- NPM 或 Yarn
- Angular CLI（如果你使用 Angular 项目）
安装 ng2-resumable
为了安装 ng2-resumable，你可以使用 NPM 或 Yarn，下面列出了两种常用的安装方法：
使用 NPM 安装：
npm install ng2-resumable
或者使用 Yarn 安装：
yarn add ng2-resumable
在安装完成之后，你就可以利用 ng2-resumable 的服务，以上传文件了。
使用 ng2-resumable 服务
在本节中，我们将会展示如何使用 ng2-resumable 的服务上传文件。
首先，你需要导入 Ng2ResumableService。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------- - ---- -------------------------------------- ------------ --------- ------------------ ------------ ------------------------------- ---------- ------------------------------- -- ------ ----- ------------------- - ------------------- -------------------- -------------------- -- -
然后，在你的组件中，你需要调用 ng2ResumableService.createUploader() 方法来创建一个上传器。
const uploader = this.ng2ResumableService.createUploader({
targetURL: 'http://localhost:3000/upload', // 上传文件的目标 URL
chunkSize: 1 * 1024 * 1024, // 分块的大小
maxFiles: 1, // 最大的同时上传文件数
maxFileSize: 10 * 1024 * 1024, // 最大文件大小
testChunks: true, // 上传前测试块的完整性
throttleProgressCallbacks: 1 // 环节进度回调以每秒次数
});在创建上传器之后，你可以调用其方法来管理文件上传。下面是一些最常用的方法：
addFile(file: File)：添加一个需要上传的文件。upload()：上传当前所有的文件。resumeAll()：恢复所有暂停的文件上传。pauseAll()：暂停所有文件上传。
-- -------------------- ---- ------- ----- ---------- ---------------- - ------------------------------------ -- ----------------- ------------------------------------- ------------------ -- ---- -------------------- -- ---- ---------------------
在上传过程中，你也可以订阅上传的事件以获得更细节的上传进度。下面是一些事件：
onFileAdded(file: any): 上传器添加了一个新的文件。onFileProgress(file: any): 上传器进度更新时。onFileSuccess(file: any): 上传器成功上传了一个文件。onFileError(file: any, message: any): 上传器上传文件失败。
每个事件都可以通过 RxJS 的 Observable 来订阅。下面是一个完整的示例：
-- -------------------- ---- ------- ------------------------------------- -- - ------------------ ------------------- --- ---------------------------------------- -- - ----------------- ----------------- --- ----------------- - -------- --- --------------------------------------- -- - ------------------ ------------------- --- ------------------------------------- -------- -- - ------------------ ---------------------- ------------- ---
结论
在这篇文章中，我们学习了如何安装和使用 ng2-resumable 包来实现可暂停/恢复的文件上传服务。我们学习了如何创建上传器、添加文件、订阅上传进度事件等。我们也实现了一个完整的上传文件的示例以便于你更好地理解使用方法。如果你正在寻找一个 Angular 的文件上传服务，ng2-resumable 可以是一个很好的选择，它提供了可定制和可配置的参数以确保成功上传文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2081e8991b448dad0a