微信小程序> 微信小程序上传图片,微信小程序上传单张或多张图片

微信小程序上传图片,微信小程序上传单张或多张图片

浏览量:849 时间: 来源:迷失丶心殇
上传作品图片,上传头像(count=1),亲测有效分享一下核心代码,希望能帮助大家
1.wxml
!--上传作品--viewclass='upload-works'style='height:{{screenHeight}}px'wx:if="{{isUpWork}}"viewclass='work-box'viewclass='works-tit'图片上传:/viewviewclass='works-img'viewwx:for="{{worksImgs}}"wx:for-item="item"wx:key="this"!--图片缩略图--imagesrc="{{item}}"mode="aspectFill"/image!--移除图片的按钮--viewdata-index="{{index}}"catchtap="deleteImg"删除/view/viewviewclass='imgiconfonticontianjia'wx:if="{{worksImgs.length9}}"bindtap="chooseImage"/view/view/view!--按钮--viewclass='btns'buttonclass='cancle'catchtap='cancleWorks'取消/buttonbuttonclass='submit'catchtap='submitWorks'提交/button/view/view
2.js
chooseImage:function(){letthat=this;letworksImgs=that.data.worksImgs;letlen=that.data.worksImgs.length;wx.chooseImage({count:9-len,//最多选择9张图片sizeType:['original','compressed'],//可以指定是原图还是压缩图,默认二者都有sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有success:function(res){console.log(res);//返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片if(res.tempFilePaths.count==0){return;}lettempFilePaths=res.tempFilePaths;//lettoken=app.data.uptoken;//上传图片循环提交for(leti=0;itempFilePaths.length;i++){wx.uploadFile({url:'url',//此处换上你的接口地址filePath:tempFilePaths[i],name:'upload_file',header:{"Content-Type":"multipart/form-data",'accept':'application/json',},success:function(res){console.log(res);letdata=JSON.parse(res.data);//这个很关键worksImgs.push(data.data.url);that.setData({worksImgs:worksImgs})}})}}})},//删除上传的图片deleteImg:function(e){varworksImgs=this.data.worksImgs;varitemIndex=e.currentTarget.dataset.index;worksImgs.splice(itemIndex,1);this.setData({worksImgs:worksImgs})},//提交个人作品submitWorks:function(){letthat=this;letworksImgs=String(that.data.worksImgs);letobj={store_id:that.data.store_id,mode_id:that.data.mode_id,works_img:worksImgs,works_info:that.data.works_info,is_xs:1}if(obj.works_img.length==0||obj.works_info==''){wx.showModal({title:'提示',content:'数据不能为空!',showCancel:false,})}else{utils.postRequest('Mode/worksAdd',obj,'加载中',(res)={if(res.data.rc==200){wx.showModal({title:'提示',content:'作品上传成功',showCancel:false,success:function(res){if(res.confirm){that.setData({isUpWork:false})that.onShow();}}})}else{wx.showModal({title:'提示',content:'作品上传失败',showCancel:false,success:function(res){if(res.confirm){that.setData({isUpWork:false})that.onShow();}}})}})}},注意:微信公众平台小程序,开发栏目uploadFile合法域名,一定要配置图片保存的域名,例如:七牛云等等

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎