前言
小程序开发过程中，图片上传是一个很常用的功能。但是小程序官方并没有提供一个很好用的图片选择器，因此社区中出现了很多第三方的图片选择器组件。在这篇文章中，我们将介绍一款很好用的 npm 包 miniprogram-image-picker，通过该包可以轻松实现图片选择和预览功能。
什么是 miniprogram-image-picker
miniprogram-image-picker 是一个微信小程序的图片选择组件库，通过该组件可以轻松实现图片选择、预览以及上传等功能。
安装
我们可以通过 npm 包管理器来安装该组件:
npm install miniprogram-image-picker
之后在小程序项目的 project.config.json 中配置 "miniprogramRoot": "miniprogram-image-picker"，同时在需要使用该组件的界面的 json 配置文件中引入该组件:
{
"usingComponents": {
"image-picker": "miniprogram-image-picker/image-picker"
}
}使用
图片选择
在需要使用图片选择功能的 wxml 中，添加如下代码:
<image-picker image="{{image}}" limit="{{5}}" bind:onselect="onImageSelect"></image-picker>其中 image 为需要展示的图片，limit 为选择图片的数量上限，bind:onselect 为选择图片后的回调函数。
在该界面对应的 js 文件中，需要添加 onImageSelect 函数:
-- -------------------- ---- -------
------
----- -
------ --
--
---------------- -
--------------
------ --------
--
-
--该函数会在用户选择图片后触发，将结果赋值给界面的 image 变量，最终展示在界面中。
图片上传
需要将选择的图片上传到服务器上，我们可以在选择图片后，将结果传递给上传函数进行处理。在选择图片后调用上传函数的 wxml 和 js 绑定方式和上面相同，这里不再重复说明。
下面是一个简单的图片上传函数:
-- -------------------- ---- -------
-------- ------------------ -
---------------
---- ----------------------------
--------- ------
----- -------
-------- --------------
----------------
--
----- ------------- -
-------------------- ----
--
--
-该函数通过 wx.uploadFile 接口将选中的图片上传到指定的服务器地址，并通过回调函数处理上传结果。
总结
通过 miniprogram-image-picker 组件，我们可以轻松地实现图片选择和上传功能。在实际开发中，我们可以根据业务需求，自定义该组件的样式和功能，让其更符合我们的实际需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067378890c4f72775840dd