• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

图片预览

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() { } })

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序图片预览发布时间:2022-07-18
下一篇:
小程序之点击图片放大预览发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap