介绍
在前端开发过程中，我们可能经常需要进行上传图片等文件的操作。这时候，使用 npm 包 peddler 可以非常方便地实现相关功能。
peddler 是一个轻量级的基于 Promise 的文件上传工具，它支持多文件上传和进度条展示，并具有可扩展性，能够与不同的存储服务库进行兼容。
在本文中，我将会详细介绍 peddler 的使用教程，并提供相应的示例代码，帮助读者快速上手使用。
安装
peddler 是一个 npm 包，因此我们可以通过 npm 安装。打开命令行终端并执行以下命令：
npm install peddler --save
使用
在我们开始使用 peddler 时，需要准备好以下参数：
- 文件列表：要上传的文件列表
- 上传地址：文件上传到的地址
- 监听上传进度的回调函数：当上传进度发生变化时将会被调用
下面是一个使用 peddler 进行上传的基本例子：
-- -------------------- ---- -------
------ ------- ---- ----------
----- -------- - --- -- ----
----- --------- - ---------------------------- -- ----
----- ---------------- - ---------- -- -
--------------------------------- -- ------
--
------------------------ ---------- -----------------
-------- -- -
--------------------
--
-------------- -- -
---------------------------------------
---进阶使用
设置请求头
在一些情况下，我们需要为上传请求设置一些自定义的请求头。peddler 提供了设置请求头的接口，我们只需要在上传时传入一个对象，对象中包含我们需要设置的请求头即可。具体实现如下：
const headers = {
Authorization: 'Bearer token',
};
peddler.upload(fileList, uploadUrl, progressCallback, { headers });上传前的操作
在一些情况下，我们需要在上传文件之前做一些操作，例如图片压缩等。peddler 提供了 beforeUpload 接口，允许我们在上传前对上传的文件做一些操作。具体实现如下：
-- -------------------- ---- -------
----- ------------ - ------ -- -
------ --- ----------------- ------- -- -
----- ------ - --- -------------
---------------------------
------------- - -- -- -
----- --- - --- --------
------- - --------------
---------- - -- -- -
----- ------ - ---------------------------------
----- --- - ------------------------
----- -------- - -----
--- ----- - ----------
--- ------ - -----------
-- ------ - ------- -
-- ------ - --------- -
------ -- -------- - ------
----- - ---------
-
- ---- -
-- ------- - --------- -
----- -- -------- - -------
------ - ---------
-
-
------------ - ------
------------- - -------
------------------ -- -- ------ --------
-------------------- -- -
----------- ------------ ---------- - ----- --------- ----
-- ---------- -----
--
--
-------------- - ------- -- -
--------------
--
---
--
------------------------ ---------- ----------------- - ------------ ---上传后的操作
在一些情况下，我们需要在上传文件之后做一些操作，例如将上传成功的文件地址保存到后端数据库中等。peddler 提供了 afterUpload 接口，允许我们在上传成功后对上传的文件做一些操作。具体实现如下：
const afterUpload = (response, file) => {
const fileUrl = response.data.fileUrl;
console.log(`文件上传成功，地址为：${fileUrl}`);
};
peddler.upload(fileList, uploadUrl, progressCallback, { afterUpload });总结
本文介绍了 npm 包 peddler 的使用教程，用实际的代码示例帮助读者更好地了解和掌握它的使用方法。peddler 提供了多种可定制的功能和接口，具有较强的灵活性和扩展性，帮助开发者更快地实现文件上传的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/106832