小程序上传、删除、预览图片

图片预览

wxml

<image src="{{baseUrl}}{{imgSrc}}" mode="widthFix" style="100%;" data-src="{{baseUrl}}{{imgSrc}}" bindtap='previewImage'></image>

js

previewImage: function (e) {
    console.log(1);
    var current = e.target.dataset.src;   //这里获取到的是一张本地的图片
    wx.previewImage({
      current: current,//需要预览的图片链接列表
      urls: [current]  //当前显示图片的链接
    })
  },

以下上传、删除图片

wxml

<!-- 评价 -->
<view class='comment_box flexBetween'>
  <image src='{{baseUrl}}{{orderInfo.thumb_img}}' mode='aspectFill' style=' 100rpx;height:100rpx;'></image>
  <view style='display:inline-block;margin-left:20rpx;'>
    <view>满意度评价</view>
    <!-- 星星评价-->
    <view class="comment-right">
      <block wx:for="{{[0, 1, 2, 3, 4]}}" wx:key=''>
        <image wx:if="{{ index < starId }}" src="/images/common/comment01.png" bindtap="startTap" id="{{index}}"></image>
        <image wx:else src="/images/common/comment01_hui.png" bindtap="startTap" id="{{index}}"></image>
      </block>
    </view>
  </view>
</view>

<!-- 评价内容 -->
<view class='comment_box'>
  <textarea placeholder='亲！ 留下你的评论吧~' placeholder-style='color:#999;' bindinput="bindContent"></textarea>
  <!-- 上传图片 -->
  <view class='chooseImg'>
    <image wx:for="{{imagesList}}" wx:key="index" src='{{item}}' mode='aspectFill' style='210rpx;height:210rpx;' data-index="{{index}}" bindlongtap="deleteImage"></image>
    <image wx:if="{{num < maxLength}}" src='/images/common/uploadImg.png' mode='widthFix' style='210rpx;' bindtap='uploadImg'></image>
  </view>
</view>

<!-- 提交评论 -->
<view class='btnBox'>
  <view class='submit_btn flexCenter' bindtap="submitComment">发布</view>
</view>

js

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    baseUrl: app.globalData.baseUrl,
    starId: 0, //星级个数
    imagesList: [],
    content: '', //评论内容
    orderInfo: {}, //存放当前评价的商品信息
    num: 0,//已上传的图片数量
    maxLength: 6//允许上传的最大数量
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options);
    var orderInfo = JSON.parse(options.orderInfo);
    this.setData({
      orderInfo: orderInfo,
      shop_id: options.shop_id
    })
  },



  /**
   * 点击星星评分
   */
  startTap: function(e) {
    this.setData({
      starId: parseInt(e.currentTarget.id) + 1
    });
  },

  // 更新评论内容
  bindContent: function(e) {
    this.setData({
      content: e.detail.value
    })
  },
  // 上传图片
  uploadImg: function() {
    var that = this;
    let imagesList = [];
    let maxSize = 1024 * 1024;
    let flag = true;
    wx.chooseImage({
      count: that.data.maxLength - that.data.imagesList.length, //最多可以选择的图片总数
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function(res) {
        wx.showToast({
          title: '正在上传...',
          icon: 'loading',
          mask: true,
          duration: 500
        })
        for (let i = 0; i < res.tempFiles.length; i++) {
          if (res.tempFiles[i].size > maxSize) {
            flag = false;
            console.log(111)
            wx.showModal({
              content: '图片太大，不允许上传',
              showCancel: false,
              success: function(res) {
                if (res.confirm) {
                  console.log('用户点击确定')
                }
              }
            });
          }
        }
        if (res.tempFiles.length > that.data.maxLength) {
          console.log('222');
          wx.showModal({
            content: '最多能上传' + that.data.maxLength + '张图片',
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log('确定');
              }
            }
          })
        }
        if (flag == true && res.tempFiles.length <= that.data.maxLength) {
          that.setData({
            imagesList: that.data.imagesList.concat(res.tempFilePaths),
            num: that.data.num + res.tempFiles.length
          })
        }
        console.log(res);
      },
      fail: function(res) {
        console.log(res);
      }
    })
  },



  /**删除图片 */
  deleteImage: function (e) {
    var that = this;
    wx.showModal({
      title: '提示',
      content: '确定删除图片吗？',
      success(res) {
        if (res.confirm) {
          var imagesList = that.data.imagesList;
          var index = e.currentTarget.dataset.index;
          imagesList.splice(index, 1);
          var num = that.data.num - 1
          that.setData({
            imagesList: imagesList,
            num: num,
          });
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
    
  },





  // 提交评论
  submitComment: function() {
    var that = this;
    if (that.data.starId == 0) {
      wx.showToast({
        title: '满意度评价不能为空',
        icon: 'none',
        duration: 2000
      });
      return false;
    }
    if (that.data.content.length <= 0) {
      wx.showToast({
        title: '评价内容不能为空',
        icon: 'none',
        duration: 2000
      });
      return false;
    }
    var url = app.globalData.reqUrl + 'shop_goods_evaluate/goods_evaluate';
    var params = {
      user_id: app.globalData.userId,
      order_number: this.data.orderInfo.shop_order_number,
      goods_id: this.data.orderInfo.goods_id,
      attr: this.data.orderInfo.attr,
      title: this.data.orderInfo.title,
      thumb_img: this.data.orderInfo.thumb_img,
      content: this.data.content,
      grade: this.data.starId,
      shop_id: this.data.shop_id
    }
    app.request.requestPostApi(url, params, this, this.successFun_goComment, this.failFun);
  },
  successFun_goComment: function(res, selfObj) {
    var that = selfObj;
    console.log(res);
    if (res.code == 200) {
      var id = res.id;
      console.log(res);
      wx.showLoading({
        title: '上传中...',
        icon: 'loading'
      })
      for (let i = 0; i < that.data.imagesList.length; i++) {
        wx.uploadFile({
          url: app.globalData.reqUrl + 'shop_goods_evaluate/upload?id=' + id,
          filePath: that.data.imagesList[i],
          name: 'uploadfile_ant',
          header: {
            "Content-Type": "multipart/form-data"
          },
          success: function(data) {
            console.log(data);
            if ((that.data.imagesList.length - 1) == i) {
              wx.hideLoading();
              wx.showToast({
                title: '评价成功',
                icon: 'none',
                duration: 2000
              })

              that.setData({

　　　　　　　　　　 starId: 0, //星级个数
    　　　　　　　　imagesList: [],
    　　　　　　　　content: '', //评论内容
    　　　　　　　　orderInfo: {}, //存放当前评价的商品信息
    　　　　　　　　num: 0,//已上传的图片数量

 }); setTimeout(function() { wx.redirectTo({ url: '/pages/orderList/orderList?status=all', }) }, 2000) } }, fail: function(data) { console.log(data); } }); } }else { wx.showToast({ title: res.message, icon: 'none' }) } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } })