微信小程序简单封装图片上传组件

微信小程序简单封装图片上传组件

希望自己 “day day up” -----小陶

我从哪里来

在写小程序的时候需要上传图片，个人觉得官方提供的 Uploader 组件不是太好用，于是乎，看了官方文档，自己封装一个组件。

我是谁

直接上主题
在根目录下创建components文件夹
在components下开始创建自己的组件
效果图如下：

由于我使用的是flex布局，所以

我从哪里来

# wxml

<view class="images-box">
  <view class="imageCount">
    <text>上传图片：</text>
    <text style="color:#909399">{{addedCount}}/{{count}}</text>
  </view>
  <view class="images">
    <block wx:for="{{images}}" wx:key="index">
      <image class="image" mode="aspectFill" src="{{item}}" bindtap="previewImage" data-index="{{index}}" bindlongpress="deleteImage"></image>
    </block>
    <view wx:if="{{addedCount<3}}" class="image addImageIcon" hover-class="addImageIconHover" hover-stay-time="200" bindtap="chooseImage">
      <mp-icon type="field" icon="add" color="gray" size="{{40}}"></mp-icon>
    </view>
  </view>
</view>

# js

Component({
  // 组件对外属性
  properties: {
    // 图片总数量
    count: {
      type: Number,
      value: 3,
      observers: function (newVal, oldVal) {}
    },
    // 图片临时访问路径集合
    images: {
      type: Array,
      value: []
    },
    // 已经添加的图片数量
    addedCount: {
      type: Number,
      value: 0,
      observers: function (newVal, oldVal) {
        console.log('--new--'.newVal, '--old--', oldVal)
      }
    },
    // 当前图片的位置下标
    currentIndex: {
      type: Number,
      value: 0,
    }
  },
  // 组件内部属性
  data: {
  },
  // 方法
  methods: {
    // 选择图片
    chooseImage() {
      this.triggerEvent('chooseImage')
    },
    // 预览图片
    previewImage(e) {
      wx.previewImage({
        urls: this.data.images,
        current: this.data.images[e.currentTarget.dataset.index]
      })
    },
    // 删除图片
    deleteImage(e){
      this.triggerEvent('deleteImage',e.currentTarget.dataset.index)
    }
  }
})

# wxss

.images-box {
  border-radius: 10rpx;
  width: 100%;
}

.imageCount {
  height: 80rpx;
  line-height: 80rpx;
}

.images {
  height: 240rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.addImageIcon{
  text-align: center;
  line-height: 200rpx;
  background-color: #f7f7f7;
}
.addImageIconHover{
  background-color: #C0C4CC;
}
.image {
  width: 30%;
  border-radius: 10rpx;
  height: 200rpx;
}

# json

{
  "component": true,
  "usingComponents":{
    "mp-icon": "/miniprogram_npm/weui-miniprogram/icon/icon"
  }
}

调用

# 父组件的 json

{
  "usingComponents": {
    "addImage": "../../components/addImage/addImage"
  }
}

# 父组件的 wxml

<view style="width: 90%; margin-left:5%;">
  <addImage count="{{count}}" images="{{images}}" addedCount="{{addedCount}}" bind:chooseImage="chooseImage" bind:deleteImage="deleteImage"></addImage>
</view>

# 父组件的 js

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    images: [],
    count: 3,
    addedCount: 0
  },
  chooseImage() {
    var that = this;
    wx.chooseImage({
      count: 3 - that.data.addedCount,
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        that.setData({
          images: that.data.images.concat(res.tempFilePaths),
          addedCount: that.data.addedCount + res.tempFilePaths.length,
        });
      }
    })
  },
  // 删除图片
  deleteImage(e){
    this.data.images.splice(e.detail,1)
    this.setData({
      images: this.data.images,
      addedCount: this.data.addedCount - 1
    })
  }
})

我要到哪里去

此代码只是一个很小的功能，代码这东西千变万化，在不同的人手中就会绽放不同程度的光彩，我希望，有一天，我的光彩会越来越亮。