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

微信小程序上传图片,微信小程序图片上传并移除

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

微信小程序图片上传ps:最近项目使用到图片上传,通过api中wx.chooseImage(Objectobject)、wx.uploadFile实现需求:最多上传3张图片,当第三张图片时,添加按钮隐藏,反之显示每添加一张图片时,显示删除icon,实现删除功能。文章目录官方API效果图1.选择图片并上传到服务器这里选择每张图片时,上传到服务器,最后把图片的地址提交给后端。通过wx.chooseImage选择图片或拍照,回调成功后把返回图片数据保存。然后在wx.uploadFile时作为参数传入资源的路径。使用wx.uploadFile将本地资源上传到服务器,回调成功后把返回的path字段存在到一个数组中。最后:把数组里的图片path及其他内容一起提交给后台。(案例中以逗号分隔格式)。选择图片返回数据效果图wx.chooseImage返回数据上传到服务器数据效果图wx.uploadFile请求接口返回数据/页面的初始数据/data:{hideAddImg:false,//隐藏添加按钮图片files:[],uploadImgArr:[],},/上传图片事件/chooseImage:function(e){varthat=this;wx.chooseImage({sizeType:[‘original’,’compressed’],//可以指定是原图还是压缩图,默认二者都有sourceType:[‘album’,’camera’],//可以指定来源是相册还是相机,默认二者都有success:function(res){//返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片//console.log(res);that.setData({files:that.data.files.concat(res.tempFilePaths[0])});//console.log(res.tempFilePaths[0]);//大于3张,隐藏添加按钮if(that.data.files.length=3){that.setData({hideAddImg:true})}//将本地资源上传到服务器//备注:每选择一张图片上传到服务器,并保存在数组中。提交时:把数组数据上传vartoken=wx.getStorageSync(‘Authorized-Token’)||”wx.uploadFile({url:http.rootDocment+’user/upload-img’,filePath:res.tempFilePaths[0],name:’img’,header:{‘Authorized-Token’:token,’content-type’:’multipart/form-data’},success(res){varinfoData=JSON.parse(res.data);if(infoData.code==200){//保存返回的图片路径that.setData({uploadImgArr:that.data.uploadImgArr.concat(infoData.data.path)});}else{//操作失败}}})}})},2.提交事件/提交事件/repairsSubmit:function(){varthat=this;//省略非空判断varparams={mini_img:that.data.uploadImgArr.join(“,”),}http.postReq(‘order/repair’,params,function(res){if(parseInt(res.code)==200){//提交成功}else{//失败}})},提交图片请求效果图3.删除图片/删除图片事件/removeImg:function(e){varthat=this;varindex=e.currentTarget.dataset.index;//console.log(that.data.files.splice(index,1))//小于3张时,添加按钮显示if(that.data.files.length=3){that.setData({hideAddImg:false})}that.data.files.splice(index,1);that.data.uploadimgarr.splice(index,1);that.setData({files:that.data.files,uploadimgarr:that.data.uploadimgarr})},4.wxmlviewclass=”uploadImgBox”viewclass=”desc”请拍摄相关的图片,便于工作人员维修/viewviewclass=”clearfiximgList”!–遍历数组–viewwx:for=”{{files}}”wx:key=”this”wx:for-index=”bindIndex”viewclass=”item”imagesrc=”{{item}}”mode=”aspectFill”/image!–删除icon自定义属性拿当前下标–viewclass=”removeBtn”bindtap=”removeImg”data-index=”{{bindIndex}}”imagesrc=”/libs/assets/images/icon/del.png”mode=”aspectFill”/image/view/view/view!–添加图片按钮–viewviewclass=”itemaddImg”bindtap=”chooseImage”hidden=”{{hideAddImg}}”imagesrc=”/libs/assets/images/icon/addImg.png”mode=”aspectFill”/image/view/view/view/view5.wxss在项目中配置scss自动编译wxss.uploadImgBox{.desc{@includesc(13px,#edb353);height:57rpx;@includefc;background-color:#f9f3e8;padding-left:35rpx;}.imgList{margin:31rpx26rpx31rpx5rpx;view{display:inline-block;float:left;padding-left:29rpx;.item{@includewh(210rpx,210rpx);position:relative;.removeBtn{position:absolute;right:0rem;top:0rem;@includewh(50rpx,50rpx);i{font-size:20px;position:absolute;right:0;top:-1px;color:#000;opacity:.5;}image{@includewh(100%,100%);@includeborderRadius(011rpx00);}}image{@includewh(100%,100%);@includeborderRadius(11rpx);}}.addImg{//@includefcc;//border:1pxdashed#aaa;//img{//@includewh(.84rem,.72rem);//}}}}}

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

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏