微信小程序 图片上传预览删除
微信小程序 图片上传预览删除
小程序wx.chooseImage方法可以选择图片，今天给大家带来的是如何显示图片及删除浏览，小程序的wx.previewImage可以浏览图片，但是却不能添加删除返回按钮什么的，所以自己写了个浏览界面。不了解这两个方法的同学请先到官网查看api。自己写了个小程序比较粗糙，现在就支持传3张图片，多张还没调，请多见谅。
效果是这个样子的（gif不清晰就截图吧）：
总共就两个界面都很简单，一个index界面传照片，一个picture界面浏览删除照片 。上面注释很全有疑问的再问我。
index.wxml
<!--pages/pic/index.wxml-->
<view><view class='view_line'/><view class='view_flex'><text class='flex_1'>设备图片</text><view class='flex_5 flex_image'><image src='{{pics.length == 0 ? image_add : pics[0]}}' mode='widthFix' bindtap='bindAddPhotoTap' class='image_add' data-index='0'/><image src='{{pics.length == 1 ? image_add : pics[1]}}' mode='widthFix' bindtap='bindAddPhotoTap' class='image_add' data-index='1'/><image src='{{pics.length == 2 ? image_add : pics[2]}}' mode='widthFix' bindtap='bindAddPhotoTap' class='image_add' data-index='2'/></view></view><view class='btn_sub' bindtap='bindSubTap'>上传</view>
</view>index.wxss
/* pages/pic/index.wxss */
.view_line{background: #d3d3d3;height: 2rpx;
}
.view_flex{display: flex;flex-direction: row;flex-wrap: nowrap;padding: 20rpx;border-bottom: 2rpx #d3d3d3 solid;align-content: center;align-items: center;
}
.flex_1{flex: 1.5;
}
.flex_5{flex: 4;
}
.flex_image{display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-around;vertical-align: center;align-content: center;align-items: center;
}
.image_add{width: 100rpx;height: 100rpx;
}
.btn_sub{width: 100%;padding: 20rpx;color: #fff;background: #2CB0E0;text-align: center;position: fixed;bottom: 0;
}index.js
// pages/pic/index.js
Page({/*** 页面的初始数据*/data: {image_add: '../../image/icon_addpic_unfocused.png',pics : [],base64Pic : [],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.setNavigationBarTitle({title: '图片上传预览',});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},//添加图片bindAddPhotoTap: function (e) {var that = this;var index = e.target.dataset.index;var base64Pic = that.data.base64Pic;var pics = that.data.pics;if (pics.length == 0) {if (index > 0) {return;}} else if (pics.length == 1) {if (index > 1) {return;}} else if (pics.length == 2) {if (index > 2) {return;}}//如果选择的图片位置和图片list长度一样的话代表还没添加过图片if (index == pics.length) {wx.chooseImage({count: 3 - pics.length,//图片数量success: function (res) {var tempFilePaths = res.tempFilePaths;for (var i = 0; i < tempFilePaths.length; i++) {pics.push(tempFilePaths[i]);//将pics图片数组转为base64字符串数组 如果上传时不需要的话可以忽略此处wx.getFileSystemManager().readFile({filePath: tempFilePaths[i], //选择图片返回的相对路径encoding: 'base64', //编码格式success: res => { //成功的回调base64Pic.push(res.data);that.setData({pics: pics,base64Pic: base64Pic,});}, fail: function (res) {that.show("图片上传失败！");}});}}});} else {//如果数组长度大于当前位置，进入图片预览及删除界面// wx.previewImage({// current: that.data.pics[index],//预览图片链接// urls: that.data.pics,//图片预览list列表// });wx.navigateTo({url: 'picture?pics=' + that.data.pics + '&index=' + index,});}},//上传操作bindSubTap : function(e){var that = this;var imgBase64 = '';//将base64图片数组转为由‘，’隔开的字符串上传if (that.data.base64Pic.length > 0) {for (var i = 0; i < that.data.base64Pic.length; i++) {if (i === 0) {imgBase64 = that.data.base64Pic[0];} else {imgBase64 = imgBase64 + ',' + that.data.base64Pic[i];}}}wx.showLoading({title: '正在上传图片...',});wx.request({url: 'xxxx',data : {imgBase64: imgBase64,//图片字符串xxx : xxx,//其它},method : 'POST',success : function(res){console.log(res);},fail : function(err){console.error(err);},complete : function(){wx.hideLoading();}})}
})index.json里面啥也没写
picture.wxml
<!--miniprogram/pages/device/picture.wxml-->
<view class='parentLayout'><swiper class="tab-content" current='{{currentTab}}' duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx"><swiper-item class="tab-item" wx:for="{{pics}}" wx:key="pic" wx:index="index"><view class='view_flex'><image class='image' mode='widthFix' src='{{pics[index]}}'/></view></swiper-item></swiper><view class='view_bottom'><view class='btn_back' bindtap='bindBackTap'>返回</view><view class='btn_del' bindtap='bindDelTap'>删除</view></view>
</view>
picture.wxss
/* miniprogram/pages/device/picture.wxss */
.parentLayout{width: 100%;height: 100%;display: flex;flex-direction: column;/* background: #23282D; */
}
.tab-content{flex: 1;
}
.tab-item{display: flex;flex-direction: column;
}
.view_flex{display: flex;justify-content: center;flex: 1;
}
.image{width: 100%;vertical-align: center;align-content: center;align-items: center;align-self: center;
}
.view_bottom{width: 100%;display: flex;flex-direction: row;flex-wrap: nowrap;background: #15191C;color: #fff;font-size: 30rpx;
}
.btn_back{flex: 1;text-align: left;padding: 30rpx;margin-left: 10rpx;
}
.btn_del{flex: 1;text-align: right;margin-right: 10rpx;padding: 30rpx;
}picture.js
// miniprogram/pages/device/picture.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;wx.setNavigationBarTitle({title: '图片预览',});// 高度自适应var calc = 0;wx.getSystemInfo({success: function (res) {var clientHeight = res.windowHeight,clientWidth = res.windowWidth,rpxR = 750 / clientWidth;calc = clientHeight * rpxR - 90;that.setData({winHeight: calc,});}});//将传过来的数组显示出来var pics = [];pics = options.pics.split(',');var index = options.index;this.setData({pics : pics,currentTab : index,});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},bindBackTap : function(e){wx.navigateBack({delta: 1,});},bindDelTap : function(e){// console.log(this.data);var index = e.currentTarget.dataset.index;var pics = this.data.pics;var currentTab = this.data.currentTab;//如果当前位置为最后一个，位置变成上一个 不然当前位置图片显示为空if (this.data.currentTab == pics.length -1 ){currentTab = pics.length - 2;}//删除所选图片的数组所在位置pics.splice(this.data.currentTab, 1);var pages = getCurrentPages();var prePage = pages[pages.length - 2];//获取上个界面base64数组并删除当前位置var base64Pic = [];base64Pic = prePage.data.base64Pic;base64Pic.splice(this.data.currentTab, 1);//更新上一页图片数组prePage.setData({state: 1,pics: pics,base64Pic: base64Pic});//更新本页面图片数组this.setData({currentTab: currentTab,pics: pics,});//如果最后一张被删除直接返回if(pics.length == 0){wx.navigateBack({delta : 1});}}, switchTab : function(e){var that = this;this.setData({currentTab: e.detail.current,});}
})差不多就是这些了，然后就可以实现图片预览添加和删除，上传的部分得根据你们自己后台给的格式上传，我这里只做了将图片转为base64字符串上传。 QQ：1398169857欢迎咨询。
链接：https://pan.baidu.com/s/1TIjhmye3Jt7627haLGlrhg
提取码：xlzh