微信小程序中实现多组图片上传的组件

时间  2020-07-13 标签 微信 程序 实现 组图 上传 组件
更新：鉴于有CSDN的朋友问我，关于多组图片分组上传的问题，就是在一个页面里复用多组图片上传的组件时，出现了没法区分组件中分组图片的问题，我刚开始没搞懂这是啥意思？后来，这位朋友给了一个需求，懂了，能够看 评论区，了解具体状况。我开始觉得是个人组件写的有问题，可是通过尝试，组件写的是没问题的，我下面作一下解释，如何区分，其实很简单啊?

更新：如何在一个页面复用这个组件

为了作测试，我写了一个demo，就是一个页面复用2次这个组件，而后经过点击不一样的button来显示对应那个组件的当前上传图片个数，借以说明，复用时如何区分，以下
在这里插入图片描述
测试过程是这样的：
一、第一个组件上传4张图片，点击button1，显示为4
在这里插入图片描述二、第二个组件上传一张图片，点击button2，显示为1
在这里插入图片描述
三、删除第一个组件中的一张图片，点击button1，显示为3
在这里插入图片描述
四、此时，点击button2，第二个组件依然是显示为1
在这里插入图片描述
其实这里区分很简单，在wxml中每一个组件给不一样的id值：前端

<imgupload      
     id = "imgupload1"      
     hint = "上传1"    >    
     </imgupload>    
     <imgupload      
     id = "imgupload2"      
     hint = "上传2">
     </imgupload>

而后经过在js中经过selectComponent，去获取不一样的对象：vue

this.imgupload1 = this.selectComponent("#imgupload1");
   this.imgupload2 = this.selectComponent("#imgupload2");

就能够区分了啊，这样你的imgupload1和imgupload2是不一样的对象，怎么会区分不了呢？web

如下为以前的内容，感谢支持！

引言

最近开发微信小程序，遇到一个需求，就是`多组图片上传` ，具体是什么需求呢？ 直观的来说，就像咱们平时发朋友圈，亦或者是发QQ说说的时候，须要上传图片，点击 `＋`号能够调用手机相册或者手机相机，而后上传的图片能够自适应的显示出来。

好了，很少说，在这个引言里面，我先展现如下我写的组件的效果，完整代码请去个人CSDN下载中下载，地址↓：
https://download.csdn.net/download/angellover2017/10583026数据库

感谢支持！！！json

效果图以下：[mmp,作个gif图花了半个小时时间，原本后面是有一段自定义组件样式的展现，可是视频太长，作gif时系统自动删了，我就在下面列出来并做解释]
这里写图片描述小程序

属性列表：微信小程序

//提示语--就是提示块下面的标语，默认为“添加图片”
      hint = "add image"
      //提示语图标--就是提示块中间的小图标，支持10中内置的图标，具体的能够下载后使用查看，默认为iconfont icon-xiangji
       /* 
     * 默认支持的icon类有10种
     * 相机
     * iconfont icon-xiangji
     * iconfont icon-xiangji1
     * iconfont icon-xiangji2
     * iconfont icon-xiangji3
     * iconfont icon-camera_full
     * 添加
     * iconfont icon-tianjia
     * iconfont icon-tianjia1
     * iconfont icon-tianjia2
     * iconfont icon-tianjia3
     * iconfont icon-icontjzp
    */
      hint_icon = "iconfont icon-xiangji3"
      //提示块的高度 ， 默认为160rpx
      hint_height = "90px"
      //提示块的宽度 ， 默认为160rpx
      hint_width = "90px"
      //提示块的背景色--注意这里是提示块的背景色，不是总体组件的背景色，默认为#E5E5E5
      hint_background = "white"
      //总体组件的背景色，默认为#FFFFFF
      background = "#F0F0F0"
      //图标的尺寸，由于icon是字体图标，所这里也至关于字体的大小，默认为100rpx
      icon_size = "4em"
      //图标的颜色，同理也便是字体的颜色，默认为#2C2C2C
      icon_color = "black"
      //图片展现的方式，值为微信小程序官方文档中image中的mode属性值，请参考微信小程序官方文档，默认为aspectFill
      mode = "center"

以上属性的设置的效果以下：[请自行与默认样式对比，再也不赘述]数组

这里写图片描述

实现方式

我这里简单说一下，实现的方式，和须要注意的几个点，相信只要注意这个点，应该均可以写出这样的组件——实现不了或者想看源代码，看上面`↑`，下载个人源代码

说一下布局上的注意事项：前端框架

  1. 注意布局，父类display 属性设为flex ,这个属性很好用，恰好知足这里的需求，子类元素能够实现自适应的浮动，以及上下对齐。惟一缺点是：子类元素不会由于父类元素的大小限制而响应式的缩小放大，因此当出现右边大量空白时须要合理调整子类元素的大小和margin属性。
  2. 注意层级关系，image标签的层级默认是比较高的，在开发中会遇到图片覆盖掉 × 号的状况，还好的是这不是微信小程序中封装的原生组件，因此经过z-index是能够轻松解决的
  3. 注意提示块的布局，hint_icon和hint_text 这两个地方要布局为hint的子元素，不然会出现不能适配宽屏的bug，由于若是布局到外部，那这两块的布局就是相对于总体了，那确定是容易跑偏

再说如下逻辑上的实现，即如何实现多组图片的屡次增长和删除微信

  1. 绑定bindtap事件，一个是绑在图标上，一个是绑在×图标上，这个都很简单，请参考微信小程序官方文档
  2. js的array数组方法中有两个方法，push()方法 和 splice()方法 ，这两个方法的具体用法请参考www3c的JavaScript文档 ：http://www.w3school.cn/
  3. 这里提供一个思路，微信小程序这个框架实际上是和目前比较流行的几个前端框架好比vue等
    很像，data中作数据绑定，除了能够实现这种绑定的便捷之外，其实data能够至关于一个小型的临时数据库，例如咱们在data中定义一个database的数组，咱们能够经过js的array的数组方法实现增删改查，对地，就是这么腻害。

如何引用？

微信小程序中引用自定义组件，首先把文件拷贝至Componen目录中[注意默认没有这个目录，须要自行建立，与`pages`同级]，而后在须要使用的页面的`json`中添加： ``` "usingComponents": { "imgupload" : "../../component/imgupload/imgupload" } ``` 而后在`wxml`中使用方式能够参考微信小程序的官方文档，在 `js` 文件中的`onReady`生命周期函数中须要实例话化件`this.imgupload = this.selectComponent("#imgupload");`

【PS】最后忍不住再说一遍，欢迎下载个人资源，里面是完整源代码，复制到Component路径下能够直接用
https://download.csdn.net/download/angellover2017/10583026

这里写图片描述

作个引流?

博主最近开了一个微信公众号，以全栈技术为初衷，里面会分享我本身写的认为比较好的原创文章，博客会部分同步，感谢关注！
在这里插入图片描述

联系我们 沪ICP备13005482号-10