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

鸭鸭梨吖

于 2024-08-07 17:27:11 发布

阅读量129

点赞数 1

文章标签：微信小程序小程序

本文链接：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(),
		})
	},