微信小程序 图片上传预览删除
小程序wx.chooseImage方法可以选择图片，今天给大家带来的是如何显示图片及删除浏览，小程序的wx.previewImage可以浏览图片，但是却不能添加删除返回按钮什么的，所以自己写了个浏览界面。不了解这两个方法的同学请先到官网查看api。自己写了个小程序比较粗糙，现在就支持传3张图片，多张还没调，请多见谅。
效果是这个样子的（gif不清晰就截图吧）：
总共就两个界面都很简单，一个index界面传照片，一个picture界面浏览删除照片 。上面注释很全有疑问的再问我。
index.wxml
设备图片
上传
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
返回
删除
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