小程序图片上传及预览和删除

效果：

1，xhtml  

其中wx:for="{{picArr}}" 为所有的图片张数，  src 为img 的图片路径  ； 自定义data-src为当前点击的图片路劲（为预览做准备） 自定义 data-list为所有的图片张数（为预览做准备）

<block wx:key="imgbox" wx:for="{{picArr}}">
          <view class='add-pic'>
            <image class='add-pic' data-list='{{picArr}}' data-src="{{urlPrev + '/zdhx/WXA018/getImg?name=' + item.nowURL}}"      src="{{urlPrev + '/zdhx/WXA018/getImg?name=' + item.nowURL}}" data-index="{{index}}" bindtap="picPreview"></image>
            <view class='img-de'  bindtap="deleteImg" data-index="{{index}}">
              <icon type="clear" size="20" />
            </view>
          </view>
 </block>

    //点击+号上传   样式自己写
        <view class='add-pic'>
          <view class='btn' bindtap='chooseImg'>+</view>
        </view>

2，JS

Page({
       data{
            urlPrev: serverInterface.urlPrev,  //urlPrev为接口ip地址  let serverInterface = require("../../utils/server.js");
            picArr: [ ],
            arrPicSave:[ ],
        }       
  })

// 上传图片
  chooseImg: function () {
    let that = this;
    wx.chooseImage({
      count: 9,
      sizeType: [],
      sourceType: ['album', 'camera'],
      success: function (res) {
        let tempFilePaths = res.tempFilePaths
        for (let i = 0; i < tempFilePaths.length; i++) {
          wx.uploadFile({
            url: that.data.urlPrev + '/zdhx/WXA018/uploadTask',
            filePath: tempFilePaths[i],
            name: 'file',
            formData: {
            },
            success: function (res) {
              wx.hideLoading();
              let imgeList = that.data.picArr.concat(JSON.parse(res.data).entity);
              that.setData({
                picArr: imgeList
              });
            }
          });
          wx.showLoading({
            title: '正在上传...',
          })
        }
      },
      fail: function (res) {
        console.log(res, '失败');
      },
      complete: function (res) { },
    })
  },

  // 删除图片
  deleteImg: function (e) {
    let that = this;
    let index = e.currentTarget.dataset.index; 
    let images = that.data.picArr;
    images.splice(index, 1);
    that.setData({
      picArr: images
    });
  },
  // 图片预览
  picPreview: function (event) {
    let _this = this;
    let urlPrev = _this.data.urlPrev
    //  获取当前点击src，以及接口返回的所有src   就是xhtml里的data-src和data-list
    var src = event.currentTarget.dataset.src;
    var imgList = event.currentTarget.dataset.list;
    //  每次点击图片，先清空数组
    _this.setData({
      arrPicSave: []
    })
    //  遍历多少张图片，然后字符串转数组并添加到arrPicSave中
    for (var i = 0; i < imgList.length; i++) {
      var forEachData = urlPrev + '/zdhx/WXA018/getImg?name=' + imgList[i].nowURL.split(',')
      _this.data.arrPicSave.push(forEachData);
    }
    // 预览
    wx.previewImage({
      current: src,      //当前点击预览的图片
      urls: _this.data.arrPicSave   //供左右侧滑的所有图片
    })
  },