在前端开发中，图片上传是一个经常会涉及到的问题。众所周知，小程序提供了上传本地图片和微信账号中的图片两种方式，但是这些方式有时候并不太符合我们的需求。为了解决这一问题，我们可以使用npm包 wepy-img-uploader。
本文将详细介绍如何使用 wepy-img-uploader 这个npm包，它的深度和学习以及指导意义，并包含了示例代码。
什么是wepy-img-uploader？
wepy-img-uploader 是一个基于 wepy 框架的小程序图片上传npm包。它可以通过调用微信的上传图片接口以及自定义上传配置来上传图片，并且可以通过不同的方式进行自定义配置。
安装和使用
首先需要安装wepy-img-uploader这个npm包。在终端中输入以下命令即可：
npm install wepy-img-uploader --save
引入wepy-img-uploader：
import wepyImgUploader from 'wepy-img-uploader'
创建一个 wepy-img-uploader 实例：
const uploader = new wepyImgUploader({
// 配置
})配置参数列表：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
url |
String |
必须 | 图片上传接口地址。 |
header |
Object |
图片上传请求头部。 | |
maxSize |
Number |
4MB | 图片大小限制。 |
uploadTapType |
String |
file | 图片上传方式，可选值有 file 和 base64。 |
allowVideo |
Boolean |
false | 是否允许上传视频。 |
uploadType |
String |
object | 文件上传方式，可选值有 object 和 raw。 |
autoUpload |
Boolean |
true | 是否自动上传。 |
fileTypes |
Array |
[] | 上传的文件类型限制，可选值有 image 和 video。 |
frequency |
Number |
500 | 上传成功后的成功回调执行的时间间隔。 |
concurrency |
Number |
1 | 上传并发数。 |
retryCount |
Number |
3 | 上传 [canceled, failed]的请求尝试的次数 |
retryInterval |
`Number | Array` | 1000 |
math.ceil |
Boolean |
true | 是否向上取整上传速度 |
useOptionsAccept |
Boolean |
true | 是否使用选项的 accept。 |
compressQuality |
Number |
图片压缩质量。 | |
backgroundSizeType |
String |
round | 背景大小类型，可选值有round、square、circle`三种类型。 |
cropperHideTop |
Number |
裁剪器顶部百分比。 | |
cropperIsCircle |
Boolean |
false | 是否裁剪成圆形。 |
selectFromAlbum |
Boolean |
true | 是否使用相册。 |
使用wepy-img-uploader的基本方法
我们假设有一个页面需要上传一个图片，以下是使用 wepy-img-uploader 的基本方法：
-- -------------------- ---- -------
-- -----------------------
----- -------- - --- -----------------
---- -------------------- -- ------
--
-- -------------
-----------------
------------------ ---------- -- -
----------------------
---------------------
--在上传图片时，可以使用 .choose() 方法来选择图片并上传。该方法返回一个Promise对象，在Promise中包含两个属性：tempFiles 和 localIds。前者是选择的图片的详细信息，后者是选择的图片的本地临时文件ID。
自定义配置参数
wepy-img-uploader 支持自定义配置各种参数，使用者可以根据自己的需求灵活配置使用。以下是一个自定义配置的例子：
-- -------------------- ---- -------
----- -------- - --- -----------------
---- -------------------
------- -
--------------- -------------------
--
-------------- ---------
----------- ------
---------- ------- -------
---------- ----
------------ --
----------- --
-------------- ------ -------
---------- --
---------------- --
------------------- ---------
--最佳实践
以下是一个最佳实践的例子，它根据图片上传成功后返回的结果预览图片：
-- -------------------- ---- -------
-----------------
------------------ ---------- -- -
----- ------- - -----------
----------------
--------
------------------- --
-------- ------------ -- -
------------
---- --------------------------------------------
----- -
--------- ---------
------- ----------------------------
----- -------
----------------- --------------------------
--
------- -------
-------- ----- -- -
----- ---- - --------
-- ------------- --- -- -
-------------------------------------------
-----------
- ---- -
-------------------- ------------- ----- --------
-
--
----- ----- -- -
-------------------- ------------- ----- --------
--
--------- ----- -- --
--
-
--
--在这段代码中，我们在上传成功后请求服务器的接口，并把返回的路径添加到图片路径的数组里面来预览。
结束语
wepy-img-uploader是一个非常强大的npm包，它为小程序的图片上传提供了一系列的功能和自定义配置参数，可以大大提高前端开发者的效率，同时也让我们的代码更加简洁和易于维护。在今后的开发中，我们可以根据自己的需求灵活使用 wepy-img-uploader 提供的各种功能与参数！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672db0520b171f02e1d01