微信小程序拍照上传后台,预览从点击的图片开始预览

编程入门 行业动态 更新时间:2024-10-09 19:20:21

微信小程序拍照上传<a href=https://www.elefans.com/category/jswz/34/1771386.html style=后台,预览从点击的图片开始预览"/>

微信小程序拍照上传后台,预览从点击的图片开始预览

微信小程序开发记录
图片上传新增删除功能预览功能,点击那张图预览那张

wxml

<view class="contant-pic"><view class="pics-list" wx:for="{{pics}}" wx:key="index"><!-- 预览 --><image src="{{item}}" class="uploadImg" bindtap="previewImage" data-index="{{index}}" ></image><!-- 点击删除照片--><image src="../../../../images/pause.png" class="uploadImg-error" data-img="{{item}}" bindtap='deleteImg'></image></view><!-- 点击拍照--><image src="../../../../images/mylogo.png" class="uploadImg {{isShow?'true':'hideTrue'}}" bindtap='chooseimg' ></image></view>wxss```css
.contant-pic{width: 94%;margin: 0 auto;height:80px;}.pics-list{width:73px;height:73px;float:left;margin-right:6px;}.uploadImg{width:70px;height:70px;}.uploadImg-error{height:25px;width:25px;position:relative;top:-80px;left:55px;}.hideTrue {display: none}.true {display: block}

js我的图片信息不是本地的,是从拍照上传之后存在data里面

//选择照片chooseimg:function(){var that = this; let pics = that.data.pics;wx.chooseImage({count: 1, // 默认9sizeType: ['original'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {let tempFilePaths = res.tempFilePathspics.push(tempFilePaths);that.setData({pics: pics})wx.uploadFile({url: '',filePath:tempFilePaths[0],name: 'file',header: {"Authorization": "Bearer " + getApp().globalData.token},success: function (res) {//格式化后台的json数据var cjson = JSON.parse(res.data);let data_index = [];for (const i in cjson.data.item){ data_index.push(cjson.data.item[i].url)}that.setData({files:data_index,})}, fail: function (res) {console.log(res)}})}})},/**删除图片 */deleteImg:function(e){let that=this;let deleteImg=e.currentTarget.dataset.img;let pics = that.data.pics;let newPics=[];for (let i = 0;i<pics.length; i++){//判断字符串是否相等if (pics[i]["0"] !== deleteImg["0"]){newPics.push(pics[i])}}that.setData({pics: newPics,isShow: true})},//点击预览previewImage:function(e){var that = this,//获取当前图片下标index = e.currentTarget.dataset.index//数据源从data获取之后需要转化一下单独的存在一个数组里面var  pictures = that.data.pics;var dataArray = [];var datas = [];for (var i = 0; i < pictures.length;i++){for( var j=0;j<pictures[i].length;j++){dataArray[j] = pictures[i][j];datas.push(dataArray[j])}}wx.previewImage({//当前显示图片current:datas[index],//数据源所有图片在同一个数组内urls: datas  })},

大家看了觉得有什么问题,请留言我会看

更多推荐

微信小程序拍照上传后台,预览从点击的图片开始预览

本文发布于:2024-03-12 23:46:54,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1732703.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:后台   上传   程序   图片   微信小

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!