1、wxml

<view class='item' >
    //顯示已存在的圖片列表,點選刪除刪除前一個view
    <view wx:for="{{imgList}}">
      <view class='imgList'>{{item.pictureurl}}</view>
      <button class='bgBtn' data-index="{{index}}" bindtap='hanlderdelBtn'>刪除</button>
    </view>
  </view>
<view class='item'>
    <text class='txt'>資料上傳</text>
    <view class='photoes'>
      <view class='uplist' wx:for="{{array}}" wx:for-index="idx" wx:for-item="item">
        <view class='fileList'>
          <image src="{{item.src}}"></image>
        </view>
        <button class='bgBtn' data-id='{{idx}}' bindtap='uploadImg'>上傳照片</button>
      </view>
      <view class='addMore' bindtap='addMorePhoto'>新增多張</view>
    </view>
</view>
 

2、wxss

.photoes .uplist{
  border: 2px dashed #FFCC99;
  background-color: #fff;
  margin-bottom: 20rpx;
}
.photoes .uplist .fileList image{
  height: 360rpx;
}
.photoes .uplist .fileList image{
  display: block;
  width: 100%;
}
.photoes .uplist .bgBtn,.photoes .addMore{
  background: #ff6600 !important;
  color: #fff !important;
  font-size: 28rpx;
  line-height: 100rpx;
  display: block;
  text-align: center;
  border-radius: 0;
}
.photoes .addMore{
  margin-top: 20rpx;
}
 

3、js

var saveimgurl1 = '';
var delstr1 = [];
Page({
 data:{
  array: [{
      id: 0,
      src: ''
    }],
  saveimgurl: '' 
 },
/*點選刪除事件*/
hanlderdelBtn: function(event) {
    console.log(event);
    var index = event.currentTarget.dataset.index;
    /*刪除下標為index的imgList裡的圖片和刪除按鈕*/
    delstr1 = this.data.imgList.splice(index, 1);
    
    console.log(delstr1);
    this.setData({
      imgList: this.data.imgList, //刪除後的圖片列表
      delStr: this.data.delStr.concat(delstr1) //已刪除的圖片列表
    });
    
  },
    /*上傳圖片 */
  uploadImg: function(event) {
    console.log(event);
    this.addImg(event.currentTarget.dataset.id);
  },
/*點選新增更多圖片 */
  addMorePhoto: function(event) {
    const length = this.data.array.length;

    /*增加圖片列表*/
    this.data.array = this.data.array.concat([{ id: length, src: ''}]);
    this.setData({
      array: this.data.array
    });
    console.log(this.data.array);
  },
/*點選上傳照片 */
  addImg: function(id) {
    console.log(id);
    var that = this;   
    wx.chooseImage({
      count: 1, // 預設9
      // sizeType: ['compressed'],
      sourceType: ['camera'],
      compressed: false,
      success: function (res) {
        console.log(res)
        // 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
        const tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);
        that.data.array[id].src = tempFilePaths[0];
        
        that.setData({
          array: that.data.array
        })
        console.log(that.data.array);
        
        wx.uploadFile({
          url: '/upload', //開發者伺服器的 url
          filePath: res.tempFilePaths[0], // 要上傳檔案資源的路徑 String型別！！！
          name: 'file', // 檔案對應的 key ,(後臺介面規定的關於圖片的請求引數)
          header: {
            'content-type': 'multipart/form-data'
          }, // 設定請求的 header
          formData: {

          }, // HTTP 請求中其他額外的引數
          success: function (res) {
            console.log(res);

            var me = JSON.parse(res.data);
            console.log(me);
            
            saveimgurl1 += me[0].fileurl + ',';
            console.log(saveimgurl1);
            that.setData({
              saveimgurl: saveimgurl1
            })
          },
          fail: function (res) {
            console.log("圖片上傳失敗" + res);
          }
        })

      }
    });
  },
/**
   * 生命週期函式--監聽頁面載入，顯示已存在的圖片列表
   */
  onLoad: function (options) {
    console.log(options);
    var that = this;
    wx.request({
      url: "Info",
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: "POST",
      data: {
        
      },
      success: function (res) {
        console.log(res);
        var res = res.data;
        that.setData({
          imgList: res[0].picList
        });
      }
    });
  },
})