写在前面
在前端工程化开发中，使用 npm 包已经成为标配之一。在这个过程中，一个好的 npm 包会为开发者带来很多便利，尤其是在上传文件这一块。本篇文章将会介绍一款 @beisen-phoenix/upload 的 npm 包，它的使用方法和注意事项等。
安装
在项目根目录下，执行如下命令：
npm install @beisen-phoenix/upload
使用
引入
import Upload from "@beisen-phoenix/upload";
初始化
const upload = new Upload(options);
options 参数详解：
url: string： 上传接口的地址headers: object： 请求头信息， object 指的是一个 key-value 对象，比如{ 'Content-Type': 'multipart/form-data' }beforeUpload: function(file: File): boolean： 上传前的回调函数，需要返回一个 Boolean 类型的值，表示是否继续上传onProgress: function(percentage: number, file: File): void： 上传中的回调函数，参数 percentage 表示上传进度，范围为 0~100，file 表示正在上传的文件onSuccess: function(responseBody: any, file: File): void： 上传成功的回调函数，responseBody 表示后端返回的数据，file 表示上传的文件onError: function(error: Error, file: File): void： 上传失败的回调函数，error 是一个 Error 类型的参数，file 表示上传失败的文件withCredentials: boolean： 表示是否允许跨域携带 cookie，Boolean 类型timeout: number： 表示上传超时的时间，单位为毫秒
触发上传
upload.uploadFile(file);
file 表示要上传的文件。
示例
-- -------------------- ---- -------
-- --
------ ------ ---- -------------------------
-- ---
----- ------ - --- --------
---- -------------------------
-------- -
--------------- ---------------------
--
------------- ---- -- -
-- --------- ---
----- ------ - --------- - ---- - ---- - --
-- --------- -
----------------- -------
-
------ -------
--
----------- ------------ ----- -- -
------------------- ---------- ----------- ------
--
---------- ----- ----- -- -
------------------- --------- ---- ------
--
-------- ------- ----- -- -
------------------- ------- ------ ------
--
---------------- -----
-------- -----
---
-- ----
----- ---- - ----------------------------------------------------
------------------------注意事项
- npm 包的使用需要注意版本号，建议使用稳定版本；
- upload 接口的地址需要与后端协商确定，可以使用开发工具（如 Postman）测试；
- beforeUpload 回调函数需要根据实际项目需求进行完善；
- 进行上传操作前需要检查文件是否存在。
结语
@beisen-phoenix/upload 拥有完善、详细的文档，使用方便，稳定性强。在实际使用中，我们可以根据需求对其进行扩展和优化。这对于前端工程化开发是一个有益的补充。希望这篇文章能够为大家的开发工作带来一定的帮助和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/beisen-phoenix-upload