• 父子组件传递图片url以string类型加 , 拼接形式传递。
• 子组件接收到父组件传的图片链接时会进行split(',')字符串分割成字符串数组

子组件代码

WXML

<view class="img-list">
  <view class="item" wx:for="{{ imgList }}" wx:key="index" >
    <image class="img" src="{{ item }}" bindtap="preview" data-img="{{ item }}" mode="aspectFill"></image>
    <view wx:if="{{ showDel }}" class="del" bindtap="del" data-index="{{index}}">删除</view>
  </view>
  <view wx:if="{{ imgList.length < maxCount && !disable }}" bindtap="upload" class="add item"></view>
</view>

WXSS

.img-list {
  display: flex;
  align-items: flex-start;
}
.img-list .item {
  width: 160rpx;
  margin-left: 10rpx;
}
.img-list .item:first-child {
  margin: 0;
}
.img-list .img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  background-color: rgba(0, 0, 0, .1);
  overflow: hidden;
}
.img-list .item .del {
  text-align: center;
  color: #e44
}
.img-list .add {
  display: inline-block;
  position: relative;
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  background-color: rgba(0, 0, 0, .1);
}
.img-list .add::after {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  content: '+';
  margin-top: -4rpx;
  font-size: 80rpx;
  color: white;
  transform: translate(-50%,-50%);
}

JS

const api = require('../../api.js')
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    imgs: {
      type: String,
      value: ''
    },
    maxCount: { // 最大上传数量
      type: Number,
      value: 9
    },
    disable: { // 是否禁用
      type: Boolean,
      value: false
    },
    maxSize: { // 图片大小，以 M 为单位
      type: Number,
      value: 10
    },
    showDel: {
      type: Boolean,
      value: true
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    imgList: [],
  },

  /**
   * 在组件实例进入页面节点树时执行
   */
  attached() {
    this.setImgList(this.data.imgs.split(',').filter(item => item))
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    setImgList(data) {
      this.setData({
        imgList: data
      })
      // 给父组件传递图片
      this.triggerEvent('upimgs', this.data.imgList.join(','))
    },
    upload() {
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          //res.tempFilePaths 返回图片本地文件路径列表

          // 限制上传图片大小
          if (this.data.maxSize * 1024 * 1024 < res.tempFiles[0].size) {
            wx.showToast({
              title: "上传文件过大，不可超过" + this.data.maxSize + "M！",
              icon: "none",
            });
            return false
          }

          wx.uploadFile({
            url: api.oss.upload,
            filePath: res.tempFilePaths[0],
            name: "file",
            // 请求携带的额外form data
            /*formData: {
              "id": id
            },*/
            header: {
              'Content-Type': "multipart/form-data",
              'Authorization': wx.getStorageSync('access_token') || '' // 让每个请求携带自定义token 请根据实际情况自行修改
            },
            success: (res) => {
              var data = JSON.parse(res.data)
              var imgList = this.data.imgList
              imgList.push(data.data)
              this.setImgList(imgList)

              wx.showToast({
                title: "图像上传成功！",
                icon: "success",
                duration: 1500,
                mask: true
              });
            },
            fail: (res) => {
              wx.showToast({
                title: "上传失败，请检查网络或稍后重试。",
                icon: "none",
                duration: 1500,
                mask: true
              });
            }
          })

        }
      })
    },
    // 预览图片
    preview(e) {
      wx.previewImage({
        current: e.currentTarget.dataset.img, // 当前显示图片的http链接
        urls: [e.currentTarget.dataset.img] // 需要预览的图片http链接列表
      })
    },
    // 删除图片
    del(e) {
      var imgList = this.data.imgList
      imgList.splice(e.currentTarget.dataset.index, 1)
      this.setImgList(imgList)
    }
  }
})

父组件

WXML

<up-img imgs="{{ proofPics }}" maxCount="{{ 3 }}" bind:upimgs="upImgs"/>

JSON

{
  "usingComponents": {
    "up-img": "../../commons/up-img/up-img"
  }
}

上图

未上传

上传两张

限制最大上传三张

好像忘记写删除图片的功能了。
删除功能已更新，图片添加完成后下面会出现删除二字。