Collect from 企业网站模板

小程序上传图片,长按删除

第一次登录送5个金币,绑定QQ送5个金币。金币可以用来观看视频和下载资源哦!

上传单张图片,比如头像

 <view bindtap="upimg" class='headl' style="background-image: url({{photo}});background-size:cover;"></view>


upimg:function(){
    var uid=wx.getStorageSync('uid');
    wx.chooseImage({
      success: function(res) {
        var tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: app.globalData.api+'/wx/user/upimg',  //上传路径
          filePath: tempFilePaths[0],
          name: 'file',
          formData:{
            'userid': uid
          },
          success: function(res){
             //上传成功处理
             
          }
        })
      }
    })
    
  }

   

上传多张,以及长按删除

<view class="contain">
  
   
   
  <form class="form" bindsubmit='formSubmit'> 
    <view class="item">
      <view class="lab" >请输入标题:</view>
      <input class="inp"  name="title"   ></input>
    </view>
    <view class="item">
      <view class="lab" >请输入内容:</view>
      <textarea class="inp"  name="context"   ></textarea>
    </view>
     <view class="item">
      <view class="lab"> 上传图片(长按删除): </view>
      <view class="imgs">
        <image src="{{item}}" data-src="{{item}}" class="upimg"  wx:for="{{imgli}}"  wx:for-item="item" wx:key="key" wx:for-index="index" bindlongtap="longTap" bindtouchstart="touchStart" bindtouchend="touchEnd" ></image> 
        <image src="../../images/addphoto.png" class="upimg" bindtap="upimg"></image> 

      </view>
    </view>
    
 <view class="clear"></view>
     <button class="tjbtn"  formType="submit" >发布</button>
  </form>
  <text>\n\n\n</text>
</view>
// pages/reg/reg.js
const app = getApp()
var that;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgli:[],
    type_id:0,
    
    // 触摸开始时间
  touchStartTime: 0,
  // 触摸结束时间
  touchEndTime: 0,  
  // 最后一次单击事件点击发生时间
  lastTapTime: 0, 
  // 单击事件点击后要触发的函数
  lastTapTimeoutFunc: null, 
     
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var type_id=options.type_id;

    that=this;
    that.setData({type_id:type_id});

    var uid=wx.getStorageSync('uid');
    var info= wx.getStorageSync('lu');
     
     if(uid==undefined||isNaN(uid)||uid==0){
        wx.redirectTo({
          url: '/pages/land/land',
        })
     }  

     
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
  /// 按钮触摸开始触发的事件
  ,touchStart: function(e) {
    this.touchStartTime = e.timeStamp
  },

  /// 按钮触摸结束触发的事件
  touchEnd: function(e) {
    this.touchEndTime = e.timeStamp
  },
  longTap: function(e) {
    let src = e.currentTarget.dataset['src'];
    console.log(src)
    console.log("long tap")
    wx.showModal({
        title: '提示',
        content: '确定删除该图片么',
        success: function(res) {
          if (res.confirm) {
             var imgli=that.data.imgli;
             var li_=[];
              for(var i=0;i<imgli.length;i++){
                  if(src!=imgli[i]){
                      li_.push(imgli[i]);
                  }
              }
              that.setData({imgli:li_});
          } else if (res.cancel) {
              console.log('用户点击取消')
          }
      }
    })
  }




  ,upimg:function(){
    var uid=wx.getStorageSync('uid');
    wx.chooseImage({
      count: 9, // 最多可以选择的图片张数,默认9
      sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
      sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
      success: function(res) {
        var pics=[];
        var imgs = res.tempFilePaths;
        for (var i = 0; i < imgs.length; i++) {
          pics.push(imgs[i])
        }
        that.uploadimg({
          url:app.globalData.api+"/wx/forum/upimg", //这里是你图片上传的接口
          path: pics, //这里是选取的图片的地址数组
        });
      },
    }) 
  } ,
  uploadimg: function(data) {
    wx.showLoading({
      title: '上传中...',
      mask: true,
    })
    var  
      i = data.i ? data.i : 0,
      success = data.success ? data.success : 0,
      fail = data.fail ? data.fail : 0;
    wx.uploadFile({
      url: data.url,
      filePath: data.path[i],
      name: 'file',
      formData: null,
      success: (res) => {
        wx.hideLoading();
        success++;
         console.log(res.data);
        var imgli=that.data.imgli;
        var p=app.globalData.api+res.data;
        imgli.push(p);
        that.setData({imgli,imgli});
      },
      fail: (res) => {
        fail++;
        console.log('fail:' + i + "fail:" + fail);
      },
      complete: () => {
        i++;
        if (i == data.path.length) { //当图片传完时,停止调用     
          console.log('执行完毕');
          console.log('成功:' + success + " 失败:" + fail);
          var myEventDetail = {
            picsList: that.data.detailPics
          } // detail对象,提供给事件监听函数
          var myEventOption = {} // 触发事件的选项
          that.triggerEvent('myevent', myEventDetail, myEventOption)//结果返回调用的页面
        } else { //若图片还没有传完,则继续调用函数
          data.i = i;
          data.success = success;
          data.fail = fail;
          that.uploadimg(data);//递归,回调自己
        }
      }
    });
  }
    
  ,formSubmit:function(e){
    var uid=wx.getStorageSync('uid');
    var context=e.detail.value.context;
    var title=e.detail.value.title;
    var imgli=that.data.imgli;
    var type_id=that.data.type_id;
    var img='';
    
    if(title.length==0){
      wx.showToast({
        title: '请输入标题',
        icon:'none',
        duration:2000 
      })
      return false;
    }

    if(context.length==0){
      wx.showToast({
        title: '请输入内容',
        icon:'none',
        duration:2000 
      })
      return false;
    }
    
    if(imgli.length>0){
      for(var i=0;i<imgli.length;i++){
        var p=imgli[i].replace(app.globalData.api,'');
        img+=p+",";
      }
    }else{
      img='no';
    }

    var obj={title:title,context:context,img:img,userid:uid,type_id:type_id};
    
     senduinfo(obj);
  }
})



function  senduinfo(obj){
  
  wx.request({     
     url:app.globalData.api+'/wx/forum/save',       
      
     header: {      
      'content-type': 'application/json'  
      },     
       data: obj,     
         success: function (res) { 
           var m=res.data; 
           if(m.status==1){
              wx.showToast({
                title:'成功发布',
                icon:'success',
                duration:1000
              });
              setTimeout(() => {
                wx.switchTab({
                  url: '/pages/index/index?type_id='+obj.type_id,
                })
              }, 1000); 
              
           }else{
            wx.showToast({
              title: m.msg,
              icon:'none',
              });
           }
         
          },     
           fail: function () {       
            wx.showToast({
              title: '请检查网络',
              icon:'none',
              });
             }     
            })    
            
        
}
在此处输入评论

允许提问者通过qq联系我

    现在绑定QQ

点击加载更多...