微信小程序多张图片上传组件

在实际开发中，很多时候都需要要上传，但是对于上传多张时需要一张张的上传，因为都可能比较大，这时就需要我们对上传的API进行进一步的处理，这样就解决了我们同时选择上传多张需求。所以为了方便以后使用，封装成一个特定的组件分享出来，也许很多能用到，也可能用不到，但是修改一下还是差不多一样可以用的。

多张上传的原理其实就是用递归的方法，在每一张上传完之后再继续上传下一张，直到完成为止。

新建一个uploadImages组件文件，定义组件的样式结构及js文件。

1页面样式布局

view

css

插件这样大概就完成了，不过不是每一个人都是和我一样的情况，使用请具体项目分析。

实例请查看地址： >

有些从接口传递过来的，本身大小不是固定一个比例，全部渲染显示在页面上，会有唰得拉伸从大到小快速闪下变形的bug，很影响用户体验。

image的mode剪裁缩放模式用 mode='widthFix' (宽度不变，高度自动变化，保持原图宽高比不变)，记得要在css里也加上height:auto，可以消除渲染拉伸变形一闪而过的bug。

image 的mode有13种模式，4种是缩放模式，9种是剪裁模式。

首先需获取scopewritePhotosAlbum权限。（放在wxgetSetting之前调用，建议放在onload中）

整理一下，处理用户拒绝授权的情况

授权完成后执行保存，先看看微信的开发文档,需注意我用红框框起来的地方。

我说的两种方法一种是保存临时文件路径的，另一种是保存的永久文件的路径，看完两种方法怎样使用看个人选择。

还有一点需注意的是不可以使用网络路径，否则保存失败，提示路径错误，找不到路径。

永久路径即保存在微信小程序项目中的，例如：'imgs/index/1png'

页面中给标签一个点击事件，绑定保存的方法，我把js方法贴上，非常简单。

先进行授权，授权成功后调用微信api即可

这个就有点麻烦，需调用wxgetImageInfo或者wxdownloadFile，而调用这个api需在后台进行配置，把需用到的接口添加进去。

具体配置，登录微信公众平台，在开发---开发设置---服务器域名---添加downloadFile合法域名。

有两种写法：

小程序保存失败请在设置中打开权限解决方法。

1、点击用户发布的详情页点击生成名片。

2、点击保存显示保存失败，自动退出到详情再次点击生成。

3、显示去授权点击去授权跳转到设置，显示权限是打开的。

以上就是关于微信小程序多张图片上传组件全部的内容，包括:微信小程序多张图片上传组件、微信小程序js数据怎么一个数据定义两个图片、小程序进入页面图片渲染会拉伸闪下变形优化.md等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！