在前端开发中，上传图片是一个必不可少的功能，并且在实际应用中经常需要对图片进行一些处理，如大小压缩、格式转换等操作。而 npm 包 bz-upload-picture 就是一个方便易用的图片上传处理工具，下面来介绍一下如何使用它。
安装
安装 bz-upload-picture 只需要在命令行中使用 npm 命令进行安装即可，如下：
npm install bz-upload-picture --save
使用
使用 bz-upload-picture 需要引入相关模块，具体使用步骤如下：
- 引入模块：
import BzUploadPicture from 'bz-upload-picture';
- 初始化 BzUploadPicture：
const uploader = new BzUploadPicture({
el: 'uploader',
method: 'POST',
maxCount: 10,
maxSize: 5,
accept: ['jpg', 'jpeg', 'png']
});- 添加回调函数：
-- -------------------- ---- ------- --------------------- ------- -- - ------------------- --- -------------------- ----- -- - ----------------- --- --------------------- ---------- -- - ---------------------- --- ---------------------- ------ -- - ------------------ ---
参数说明
| 参数 | 类型 | 说明 |
|---|---|---|
| el | string | HTMLElement | 必填，上传组件所在容器的选择器或 HTMLElement，如：'#uploader' 或 document.getElementById('uploader')。 |
| method | string | 选填，上传方法，默认为 'POST'。 |
| maxCount | number | 选填，最大数量限制，默认为 10。 |
| maxSize | number | 选填，最大大小限制，单位为 MB，默认为 5。 |
| accept | string[] | 选填，文件类型限制，默认为 ['jpg', 'jpeg', 'png']。 |
事件说明
| 事件 | 说明 |
|---|---|
| change | 选中文件后触发。 |
| error | 上传失败时触发。 |
| upload | 开始上传后触发。 |
| success | 上传成功后触发。 |
示例代码
-- -------------------- ---- -------
----------
-----
---- --------------------
------
-----------
--------
------ --------------- ---- --------------------
------ ------- -
--------- -
----- -------- - --- -----------------
--- -----------
------- -------
--------- ---
-------- --
------- ------- ------- ------
---
--------------------- ------- -- -
-------------------
---
-------------------- ----- -- -
-----------------
---
--------------------- ---------- -- -
----------------------
---
---------------------- ------ -- -
------------------
---
-
-
---------以上就是 npm 包 bz-upload-picture 的使用教程，希望能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8fccdc64669dde57aa