小程序上传多张图片

一：textarea组件层级过高导致文字穿透浮层问题。

项目需求：最近做的一个小程序需求，其中一个页面使用到了 textarea 这个小程序组件，然后点击页面上的某个元素，会触发页面弹起一个弹窗，这时发现 textarea 的 placeholder文字或者输入的文字内容，会直接穿透遮罩层和浮动弹窗，显示在最上面。第一反应以为是层叠级问题。所以疯狂给弹框的 z-index 属性往上加。但无济于事。于是改变思路：

利用 wx:if 当显示弹框的时候，把 textarea 隐藏；弹框关闭的时候，显示textarea。（这个方法比较暴力直接，治标不治本，若有更好的解决方案可以告知）。

二：上传多张图片

项目需求：用户最多可以上传6张图片，如果上传错误可以单张删除，上传成功可以预览照片。效果图如下：

首先在微信公众平台配置好uploadFile合法域名。

界面的WXML代码大致如下所示：

<view class="upload-view">
<view class='upload'>
    <!-- 根据已选择的图片临时路径数组展示图片-->
    <view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="{{index}}">
        <!-- 删除-->
        <icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="red"/>
        <!-- 图片-->
        <image class="special-image" bindtap='showImg' data-index="{{index}}" src='{{item}}'></image>
    </view>
    <!-- 上传按钮+框 -->
    <view class="image" wx:if="{{showUpload}}">
     <image  bindtap='upload' src="/images/timg.png" ></image>
    </view>
</view>
</view>

与此对应的js代码如下：

Page({
  data: {
    id:'',                               //上传时后端返回的图片ID,拼接后存入
    joinString:'',                    
    uploaderList: [],              //保存上传图片url的数组
    uploaderNum: 0,             //已经上传的图片数目
    showUpload: true,           //控制上传框的显隐
  },
//上传图片
  upload: function (e) {
    var that = this;
//选择图片
    wx.chooseImage({
      count: 6 - that.data.uploaderNum, // 默认6
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        that.data.uploaderList.concat(res.tempFilePaths);
        var uploaderList = res.tempFilePaths;
        that.setData({
          uploaderList: that.data.uploaderList.concat(res.tempFilePaths),
        })
        that.setData({
          uploaderNum: that.data.uploaderList.length
        })

        if (uploaderList.length == 6) {
          that.setData({
            showUpload:false
          })
          console.log(that.showUpload)
        }
        for (var i = 0; i < uploaderList.length; i++) {
          wx.uploadFile({
            url: 'xxxxx',
            filePath: uploaderList[i],
            name: 'files',
            formData: {
              files: uploaderList,
            },
            success: function (res) {
               var id = JSON.parse(res.data).data.attId
that.setData({
                id: that.data.id + `${id},`,
                joinString: (that.data.id + `${id},`).slice(0, -1)
              })
            }
          })
        }
      }
    })
  },
})

删除图片、展示图片逻辑如下：

 //展示图片
  showImg: function (e) {
    var that = this;
    wx.previewImage({
      urls: that.data.uploaderList,
      current: that.data.uploaderList[e.currentTarget.dataset.index]
    })
  },
 // 删除图片
  clearImg: function (e) {
    var that = this
    var nowList = [];//新数据
    var uploaderList = that.data.uploaderList;//原数据
    
    for (let i = 0; i < uploaderList.length; i++) {
      if (i == e.currentTarget.dataset.index) {
        var arr = that.data.joinString.split(',')
            arr.splice(i, 1);                              //删除图片的同时删除掉其对应的ID
            var newArr = arr.join(',')
            that.setData({
              joinString:newArr,
              id:newArr+','
            })
           } else {
        nowList.push(uploaderList[i])
      }
    }
    this.setData({
      uploaderNum: this.data.uploaderNum - 1,
      uploaderList: nowList,
      showUpload: true,
    })
   },

之后就是随着表单信息把图片ID一块提交了，注意：在提交完成之后记得将data中的uploadList、uploadNum、Id、joinString清空哦！否则再次提交表单的时候会出现上传图片的bug哦！

 

转载于:https://www.cnblogs.com/YMoonwind/p/11353743.html