前言
在开发前端项目时，我们总会遇到和文件处理相关的需求，如文件上传、文件下载、文件预览、断点续传等等。实现这些功能时，我们可能会先自己尝试写一些代码，但是很快就会发现，这些功能由第三方库实现通常更加简单、高效、稳定。其中，npm 包 @hke/ms-fileservice 就是一款常用的文件服务库。今天，本篇文章将详细讲解如何使用它来实现文件上传和下载。
安装
在使用 @hke/ms-fileservice 之前，需要先进行安装。打开终端，切换到项目根目录，运行以下命令：
npm install @hke/ms-fileservice
配置
在安装完成后，我们需要进行一些配置，以方便后续使用。打开项目的 main.js 或 index.js，在顶部添加以下代码：
-- -------------------- ---- -------
------ - ----------- - ---- ----------------------
----- ----------- - --- -------------
---------- --- ------ -----
---------- --- ------ -----
------- ----------
--------- -----------
--------- ------
-------- ----- -- --------
---
-------------------------- - ------------需要注意，这里的 accessKey、secretKey 和 bucket 是对象存储服务商提供的凭证信息，endpoint 是对象存储服务的访问地址。这些信息可以在对象存储服务商的管理控制台中获取。useHttps 表示是否启用 HTTPS 协议，默认为 false。timeout 表示请求超时时间，默认为 10000 毫秒。
文件上传
配置完成之后，我们就可以使用 $fileService 进行文件上传。在组件中，可以使用以下代码实现单个文件上传：
-- -------------------- ---- -------
------ ----------- --------------- ---------------------------
------------------ -
----- ---- - ------------------------------
------------------------------------------------ -- -
-----------------
------------ -- -
-------------------
---
-这里首先获取用户选取的文件，然后调用 $fileService.uploader.upload() 方法上传文件。该方法的参数是一个 File 对象。返回值是一个 Promise 对象，resolved 后返回文件的上传结果。
如果要上传多个文件，可以使用以下代码：
-- -------------------- ---- -------
------ ----------- --------------- -------- ---------------------------
------------------ -
----- ----- - ---------------------------------------
----- -------------- - -------------- -- -
------ ----------------------------------------
---
------------------------------------ -- -
-----------------
------------ -- -
-------------------
---
-这里通过将 FileList 对象转换为数组，再使用 Array.map() 方法遍历数组，调用 $fileService.uploader.upload() 方法上传文件。最后，使用 Promise.all() 方法等待所有文件上传完成，再打印上传结果。
文件下载
除了文件上传，我们也经常需要实现文件下载的功能。使用 $fileService 进行文件下载非常简单，可以使用以下代码：
this.$fileService.downloader.download(fileKey).then(downloadUrl => {
console.log(downloadUrl);
window.open(downloadUrl);
}).catch(err => {
console.error(err);
});这里的 fileKey 是要下载的文件的唯一标识符。该方法返回值是一个 Promise 对象，resolved 后返回文件的下载链接。由于浏览器的安全机制，下载链接需要在新窗口中打开，否则可能会被拦截。
结语
到此为止，我们已经学会了如何使用 @hke/ms-fileservice 实现文件上传和下载的功能。除此以外，该库还支持多种高级功能，如对象存储、断点续传、文件安全等等，具有非常强的实用价值。希望本篇文章能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bbd967216659e244113