小程序上传图片,长按删除 查看视频密码
第一次登录送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', }); } }) }