微信小程序> 微信小程序上传图片,微信小程序上传图片并预览

微信小程序上传图片,微信小程序上传图片并预览

浏览量:808 时间: 来源:眼睛微微笑

viewviewclass='title'上传图片/viewviewclass='imgArr'viewwx:for="{{imgArrs}}"class='img_item'imagesrc='{{item}}'mode='widthFix'bindtap='previewImage'data-item="{{item}}"//viewviewclass='addImg'bindtap='chooseImage'imagesrc='http://etc-app.oss-cn-beijing.aliyuncs.com/image_201905301537160389.png'mode='widthFix'//view/view/view.addImg{width:122rpx;height:122rpx;}.imgArrimage{display:inline!important;width:100%;height:100%;}.imgArrview{display:inline-block;margin:10rpx;}.img_item{width:122rpx;height:122rpx;border:1rpxsolid#e5e5e5;position:relative;}.title{height:96rpx;line-height:96rpx;font-size:32rpx;font-weight:normal;font-stretch:normal;letter-spacing:1rpx;color:#333333;}data:{imgArrs:[],//加一个图片显示一张idArrs:[]//存放每张图片标识符id},/组件的方法列表/methods:{chooseImage(){letthat=thiswx.chooseImage({count:1,sourceType:['album','camera'],success(res){//tempFilePath可以作为img标签的src属性显示图片constpath=res.tempFilePaths[0]wx.uploadFile({url:'要上传的地址',filePath:path,name:'image',success:(res)={console.log(res)//根据查看结果是否需要json化let{url,id}=JSON.parse(res.data).dataconsole.log(url)console.log(id)that.data.imgArrs.push(url)that.data.idArrs.push(id)that.setData({imgArrs:that.data.imgArrs,idArrs:that.data.idArrs})console.log(that.data.imgArrs)console.log(that.data.idArrs)}})}})},//图片预览previewImage(e){console.log(e)letthat=thiswx.previewImage({urls:that.data.imgArrs,current:e.target.dataset.item,})}}

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

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