欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 养生 > 微信小程序---照片渲染功能,以及上传照片功能。

微信小程序---照片渲染功能,以及上传照片功能。

2024/10/24 12:30:36 来源:https://blog.csdn.net/weixin_51494148/article/details/140996989  浏览:    关键词:微信小程序---照片渲染功能,以及上传照片功能。

照片渲染:
HTML:

 <view class="img-list"><image wx:for="{{filesListee}}" wx:key="key" bindtap="previmg" data-src="{{item}}" style="width: 70px;height: 70px;margin:10px 2px;" src="{{item}}"></image></view>

js:

	data: {filesListee:[],
},//放大照片代码previmg: function (e) {var picUrl = e.target.dataset.src;if (!picUrl) {return;}var urls = [];urls.push(picUrl)wx.previewImage({current: picUrl, // 当前显示图片的http链接  urls: urls // 需要预览的图片http链接列表  })},//获取到的照片用,分割this.setData({filesListee:res.data.oldPartPhoto ? res.data.oldPartPhoto.split(',') : [],})

上传照片:
html:

  <view class="img-list"><leePhoto value="{{licenseList}}" list="{{licenseList}}" name="ruZhiDengJi" stype="3" maxNum="2" poiname="" type="editor" bindchange="updateList"></leePhoto></view>

js:

	data: {licenseList: [],licenseListStr: "",
},updateList(event) {let arr = event.detail.list;let narr = [];for (var i = 0; i < arr.length; i++) {narr.push(arr[i].imgPath)}this.setData({licenseList: arr,licenseListStr: narr.toString(),})},

leePhoto封装组件在下一篇

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com