小程序上傳、刪除、預覽圖片

圖片預覽

wxml

<image src="{{baseUrl}}{{imgSrc}}" mode="widthFix" style="width: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='width: 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='width:210rpx;height:210rpx;' data-index="{{index}}" bindlongtap="deleteImage"></image> <image wx:if="{{num < maxLength}}" src='/images/common/uploadImg.png' mode='widthFix' style='width: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() { } })