小程序——选择相册或拍照模式

从相册选择图片并显示

打开摄像获取拍照

    我是想实现一个类似于QQ空间的发表，可以写文字，然后下面配上图片。然后就简单写了一下，下面是我的具体代码：

.wxml：

<view class="up-cationter"> 
    <textarea class="up-text" /> 
    <view class="upImg">
        <button bindtap="chooseButton">选择图片</button> 
        <image class="madeImg" mode="aspectFit" src="{{tempFilePath}}"></image>
        <button bindtap="lookButton">发布</button> 
    </view>
 </view>

.xcss:

.up-cationter{
    padding: 40rpx 5rpx;
    background-color: whitesmoke;
    flex-direction: column;
}
.up-text{
    margin: 40rpx auto;
    width: 90%;
    height: 450rpx;
    background-color: #fcfcfc;
    border: 1rpx white solid; 
}
.upImg{
    background-color: whitesmoke;
    padding-left: 20rpx;
    padding-right: 20rpx;
    flex-direction: column;
    text-align: center;
    margin: 20rpx 10rpx;
}
.madeImg{
    width: 50%;
    height: 300rpx;
    margin-top: 30rpx;
    margin-bottom: 30rpx;
}

.js:

 chooseWay: function (type) {
    var that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: function (res) {
        /*上传多张（遍历数组，一次传一张） */
        for (var index in res.tempFilePaths) {
        that.uploadImg(res.tempFilePaths[index]);

        }
         that.setData({
          tempFilePath : res.tempFilePaths[index]
        })
      }
    })
  },
  uploadImg: function (url, filePath) {
    var that = this;
    wx.uploadFile({
      url: url,
      filePath: '',
      name: 'uploadFile',
      header: {
        'content-type': 'multipart/form-data'
      }, // 设置请求的 header
      formData: { 'shopId': wx.getStorageSync('shopId') },
      success: function (res) {
        wx.showToast({
          title: "图片修改成功",
          icon: 'success',
          duration: 700
        })
      },
      fail: function (res) {
      }
    })
  },

效果如下：

（ps:因为是在电脑上做的测试，所以无法选择“拍照”模式，感兴趣的朋友可以自己尝试）

问题：  

奈何发现好像不管选了多少张（最多9张）图片，只会在页面中显示一张，总会覆盖前面的图片。奈何一个小白，也是不知道什么地方的问题。希望有大佬可以帮我指出来，在此谢过