微信小程序图片上传组件

原创已于 2022-07-10 13:08:23 修改 · 5.2k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #前端 #javascript

于 2019-08-20 10:29:50 首次发布

小程序专栏收录该内容

16 篇文章

订阅专栏

参考：微信小程序图片上传组件 - 简书

gif效果图，加载需要一丢丢时间

功能介绍
1.点击+框,选择并展示所选图片
2点击×删除对应图片
3.右上角0/9看到没,最多选择9张
4.点击图片放大预览,并可左右滑动切换

先来介绍一下各项数据

Page({
    data: {
          uploaderList: [],
          uploaderNum:0,
          showUpload:true
    }
})

uploaderList:已选择的图片临时路径数组

uploaderNum:已选择图片个数

showUpload:用来判断是否可继续选择图片,当传至9张时不可继续上传

界面布局

<!-- 容器 -->
<view class='ui_uploader_cell'>
    <!-- 根据已选择的图片临时路径数组展示图片-->
    <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 bindtap='showImg' data-index="{{index}}" src='{{item}}'></image>
    </view>
    <!-- 上传按钮+框 -->
    <view class='ui_uploader' bindtap='upload' wx:if="{{showUpload}}"></view>
</view>

根据已选择的图片临时路径数组展示图片wx:for="{{uploaderList}}"
删除icon上挂载data数据用来删除指定图片data-index="{{index}}"
图片上挂载data数据用来点击放大展示图片data-index="{{index}}"
根据已选图片个数判断是否可继续上传wx:if="{{showUpload}}"

逻辑处理

//index.js
//获取应用实例
const app = getApp()
Page({
    data: {
        uploaderList: [],
        uploaderNum:0,
        showUpload:true
    },
    // 删除图片
    clearImg:function(e){
        var nowList = [];//新数据
        var uploaderList = this.data.uploaderList;//原数据
        
        for (let i = 0; i < uploaderList.length;i++){
            if (i == e.currentTarget.dataset.index){
                continue;
            }else{
                nowList.push(uploaderList[i])
            }
        }
        this.setData({
            uploaderNum: this.data.uploaderNum - 1,
            uploaderList: nowList,
            showUpload: true
        })
    },
    //展示图片
    showImg:function(e){
        var that=this;
        wx.previewImage({
            urls: that.data.uploaderList,
            current: that.data.uploaderList[e.currentTarget.dataset.index]
        })
    },
    //上传图片
    upload: function(e) {
        var that = this;
        wx.chooseImage({
            count: 9 - that.data.uploaderNum, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function(res) {
                console.log(res)
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                let tempFilePaths = res.tempFilePaths;
                let uploaderList = that.data.uploaderList.concat(tempFilePaths);
                if (uploaderList.length==9){
                    that.setData({
                        showUpload:false
                    })
                }
                that.setData({
                    uploaderList: uploaderList,
                    uploaderNum: uploaderList.length,
                })
            }
        })
    },
    onLoad: function() {}
})

以下是我自己的线上版本：

上传图片组件：

index.wxml

<view class="panel-title">{{title}}</view>
  <view class="{{uploaderList.length === 0 ? 'ui-uploader-cell':'ui-uploader-cell-other'}}">
    <!-- 根据已选择的图片临时路径数组展示图片-->
    <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="#666666" />
      <!-- 图片-->
      <image bindtap='showImg' data-index="{{index}}" src='{{item}}'></image>
    </view>
    <!-- 上传按钮+框 -->
    <view class='ui-uploader' bindtap='upload' wx:if="{{showUpload}}">
      <image src="/images/update_img.png"></image>
    </view>
    <view wx:if="{{uploaderList.length === 0}}" class="title2">{{desc}}</view>
  </view>

index.wxss

@import '/app.wxss';
.panel-title{
  margin-bottom: 20rpx;
}
.ui-uploader-cell-other {
  width: 690rpx;
  padding: 40rpx 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  /* justify-content: flex-start; *//* align-items: center; */
}

.ui-uploader-cell {
  width: 690rpx;
  /* padding: 20rpx 0; */
  display: flex;
  /* justify-content: flex-start; */
  flex-wrap: wrap;
  align-content: flex-start;
}

.ui-uploader-item {
  width: 118rpx;
  height: 118rpx;
  margin-right: 18rpx;
  margin-bottom: 18rpx;
  padding-bottom: 2rpx;
  padding-right: 2rpx;
  position: relative;
}

.title2 {
  width: 520rpx;
  display: flex;
  align-items: center;
}

.ui-uploader-item-icon {
  position: absolute;
  right: 0;
}

.ui-uploader {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0rpx 40rpx 0 rgba(0, 0, 0, 0.08);
}

index.js

// components/case-imgs/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    uploaderList: {
      type: Array,
      value: []
    },
    uploaderNum: {
      type: Number,
      value: 0
    },
    desc: {
      type: String,
      value: '拍照化验单、检查资料报告单、药品处方单、患处照片等。'
    },
    title: {
      type: String,
      value: '补充图片'
    },
    type: {
      // false 开启图文咨询  补充咨询
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    uploaderList: [],
    uploaderNum: 0,
    showUpload: true,
    uploaderNowNum:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 删除图片
    clearImg: function(e) {
      var nowList = []; //新数据

      var uploaderList = this.data.uploaderList; //原数据

      for (let i = 0; i < uploaderList.length; i++) {
        if (i == e.currentTarget.dataset.index) {
          continue;
        } else {
          nowList.push(uploaderList[i])
          continue;
        }
      }
      this.setData({
        uploaderNum: this.data.uploaderNum - 1,
        uploaderList: nowList,
        showUpload: true
      })
      this.triggerEvent('getUploaderList', {
        uploaderList: nowList
      })
    },
    //展示图片
    showImg: function(e) {
      var that = this;
      wx.previewImage({
        urls: that.data.uploaderList,
        current: that.data.uploaderList[e.currentTarget.dataset.index]
      })
    },
    //上传图片
    upload: function(e) {
      var that = this;
      wx.chooseImage({
        count: 5 - that.properties.uploaderNum, // 默认5
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          console.log(res)
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          let tempFilePaths = res.tempFilePaths;
          console.log(tempFilePaths)

          let uploaderList = that.data.uploaderList.concat(tempFilePaths);

          if (!that.properties.type) {
            //开启图文咨询
            if (uploaderList.length == 5) {
              that.setData({
                showUpload: false
              })
            }
            that.setData({
              uploaderList: uploaderList,
              uploaderNum: uploaderList.length,
            })
            that.triggerEvent('getUploaderList', {
              uploaderList: uploaderList
            })
          }else{
            // 补充咨询
            if (uploaderList.length + that.properties.uploaderNum === 5) {
              that.setData({
                showUpload: false
              })
            }
            that.setData({
              uploaderList: uploaderList,
              uploaderNowNum: uploaderList.length + that.properties.uploaderNum
            })
            that.triggerEvent('getUploaderList', {
              uploaderList: uploaderList,
              uploaderNowNum: that.data.uploaderNowNum
            })
          }

        }
      })
    },
  }
})

页面调用组件：

 <uploads-img title="上传资料" bind:getUploaderList="getUploaderList"></uploads-img>

  //获取上传图片
  getUploaderList(e) {
    this.setData({
      uploaderList: e.detail.uploaderList
    })
  },