E企盈营销工具技术服务商 热线:4006-838-530

微信小程序上传图片,微信小程序开发教程(6)微信小程序上传图片后预览图片

E企盈直播平台营销卖货系统

微信小程序如何做一个上传图片,并且点击图片可以预览,提交图片后,点击查看。注:目前微信小程序还不支持base64图片上传。逻辑是:点击图片小图标,直接上传图片到服务器,然后后台返回图片id码,在提交表单的时候,把图片id码提交到后台,这样是为了绑定id码和记录。网上大多数文章写的是在chooseImage的时候,直接uploadFile上传图片,那样做有一个弊端,无论是否这个表单提交,只要你选择了图片,后台都保存了那一张,无形给后台服务器造成了巨大的压力;除此之外,还有一个弊端,就是如果每次只添加一张,那么之前添加的图片,又会被重新提交到后台一次。所以我做了一下改良,在表单提交的时候,再进行图片上传处理,没有直接在选择图片的时候进行上传处理viewclass=”Rose-section”viewclass=”Rose-section_title”/viewviewclass=”Rose-upimg”iconclass=”iconfonticon-image”ontap=”chooseImg”wx:if=”{{images.length3}}”/icon/view/viewviewclass=”Rose-section”wx:if=”{{images.length!=0}}”viewclass=”Rose-section_title”/viewviewclass=”Rose-upimg”viewclass=”Rose-imgbox”wx:for=”{{images}}”wx:for-item=”upitem”wx:key=”this”imageclass=”Rose-image”src=”{{upitem}}”data-arr=”{{images}}”mode=”aspectFit”data-idx=”{{index}}”bindtap=”imagePreview”/imageviewclass=”Rose-remover”data-idx=”{{index}}”bindtap=”removeImage”删除/view/view/view/viewdata:{images:[],catid:”,disabled:true,showEdit:false,id:”,aids:[]},removeImage(e){letidx=e.target.dataset.idx;letimg=this.data.images;img.splice(idx,1);this.setData({images:img});},imagePreview(e){letidx=e.target.dataset.idx;letarr=e.target.dataset.arr;wx.previewImage({current:arr[idx],//当前预览的图片urls:arr,//所有要预览的图片});},uploadImg:function(){varthat=this;varaids=[];varimages=that.data.images;returnnewPromise(function(resolve,reject){for(leti=0,h=images.length;ih;i++){wx.uploadFile({url:’https://www.zhmzjl.com/index.php?m=content&c=punch&a=upload’,filePath:images[i],name:’file’,success:function(res){let_data=JSON.parse(res.data)if(_data.code==0){let_aid=_data.aid;aids.push(_aid);that.setData({aids:aids});if(images.length==aids.length){resolve(aids);}}},fail:function(res){reject(res);wx.showModal({title:’提示’,content:’上传图片失败’,showCancel:false,success:function(res){}});}});}});},chooseImg:function(){//选取图片varthat=this;if(that.data.images.length3){//限制最多只能留下3张照片wx.chooseImage({count:3,sizeType:[‘original’,’compressed’],sourceType:[‘album’,’camera’],//指定来源success:function(res){//返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片letimages=that.data.images.concat(res.tempFilePaths);that.setData({images:images});}});}},formSubmit:function(){wx.showLoading();varthat=this,aids=[];that.setData({disabled:true//想偷懒都不行,这里需要点击按钮后,按钮就设置成disabled,避免重负提交});varpromise=that.uploadImg();//进行图片的上传promise.then(res={aids=that.data.aids;letaidStr=aids.join(‘;’);let_params={catid:that.data.catid,title:that.data.title,remark:that.data.remark,username:that.data.username,aids:aidStr//图片}if(that.data.id){//如果有id,修改_params.id=that.data.id;Api.everyupdate(_params).then(res={if(!res.data.code){wx.hideLoading();that.resetPage();}});}else{Api.everyadd(_params).then(res={//更新if(!res.data.code){wx.hideLoading();that.resetPage();}});}})}不得不说,我做的改良确实很有效,在选择图片后,删除图片,重新选择,不会立刻传图,就不会有操作错误的图片提交,但是,这地方需要图片上传完成后,才能进行表单提交操作,涉及到同步问题,暂时处理得还不够完美。先实现功能,在做优化吧。。。想要了解更多,请关注我的博客源码下载地址:,喜欢就star哟微信扫码体验

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序上传图片,微信小程序开发教程(6)微信小程序上传图片后预览图片
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏