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

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

希望自己 “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"
  }
}

我要到哪里去

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