后台,预览从点击的图片开始预览"/>
微信小程序拍照上传后台,预览从点击的图片开始预览
微信小程序开发记录
图片上传新增删除功能预览功能,点击那张图预览那张
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 })},
大家看了觉得有什么问题,请留言我会看
更多推荐
微信小程序拍照上传后台,预览从点击的图片开始预览
发布评论